JSFiddle - React, Tailwind, and code Playground

by dvanauken

HTML

<table class="tables_ui" id="t_draggable1">
  <caption>
    <h4>Table 1</h4></caption>
  <tbody class="t_sortable">
    <tr>
      <th>col_1</th>
      <th>col_2</th>
      <th>col_3</th>
      <th>col_4</th>
    </tr>
    <tr>
      <td>156</td>
      <td>2668</td>
      <td>100.95</td>
      <td>1.82</td>
    </tr>
    <tr>
      <td>256</td>
      <td>618</td>
      <td>10.35</td>
      <td>1.82</td>
    </tr>
    <tr>
      <td>789</td>
      <td>28</td>
      <td>105.8</td>
      <td>15.89</td>
    </tr>
  </tbody>
</table>

<table class="tables_ui" id="t_draggable2">
  <caption>
    <h4>Table 2</h4></caption>
  <tbody class="t_sortable">
    <tr>
      <th>COL_1</th>
      <th>COL_2</th>
      <th>COL_3</th>
      <th>COL_4</th>
    </tr>
    <tr>
      <td>36</td>
      <td>78</td>
      <td>100.9</td>
      <td>1.82</td>
    </tr>
    <tr>
      <td>236</td>
      <td>668</td>
      <td>10.95</td>
      <td>12.80</td>
    </tr>
  </tbody>
</table>

CSS

.tables_ui {
  display: inline-block;
  margin: 2px 2%;
  border: 2px solid #3333fe;
  border-spacing: 0;
}

.tables_ui ul li {
  min-width: 200px;
}

.dragging li.ui-state-hover {
  min-width: 240px;
}

.dragging .ui-state-hover a {
  color: green !important;
  font-weight: bold;
}

.tables_ui th,
td {
  text-align: right;
  padding: 2px 4px;
  border: 1px solid;
}

.t_sortable tr,
.ui-sortable-helper {
  cursor: move;
}

.t_sortable tr:first-child {
  cursor: default;
}

.ui-sortable-placeholder {
  background: yellow;
}

JavaScript

var $tabs = $('#t_draggable2')
  $("tbody.t_sortable").sortable({
    connectWith: ".t_sortable",
    items: "> tr:not(:first)",
    appendTo: $tabs,
    zIndex: 999990,
    helper: function(event) {
      return $('<span style="white-space:nowrap;"/>')
        .text($(this).text() + " helper");
    }
  }).disableSelection();

  var $tab_items = $(".nav-tabs > li", $tabs).droppable({
    accept: ".t_sortable tr",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
      return false;
    }
  });