JSFiddle - React, Tailwind, and code Playground

by Harris Brakmic

HTML

<div class="horizontal">
            <table id='table-draggable1'>  
                <tbody class="connectedSortable">  
                    <tr>
                        <th>col1</th>
                        <th>col2</th>  
                        <th>col3</th>  
                        <th>col4</th>  
                    </tr>
                    <tr>   
                        <td>156</td>                                                                                         
                        <td>668</td>                                                              
                        <td>100.95</td>  
                        <td>1.82</td>                                                                  
                    </tr>  
                      <tr>   
                        <td>22</td>                                                                                         
                        <td>655</td>                                                              
                        <td>99.95</td>  
                        <td>1.82</td>                                                                  
                    </tr>  
                    <tr>  
                        <td>256</td>                                                                                         
                        <td>668</td>                                                              
                        <td>100.95</td> 
                        <td>1.82</td>                                                                
                    </tr>  
                </tbody> 
            </table>
            </div>
            <div class="horizontal">
            <table id='table-draggable2'>  
                <tbody class="connectedSortable">  
                    <tr>
                        <th>COL1</th>  
                        <th>COL2</th>  
                        <th>COL3</th>  
                        <th>COL4</th>  
      ...

CSS

ul li {
    min-width: 200px;
}
.dragging li.ui-state-hover {
    min-width: 240px;
}
.dragging .ui-state-hover a {
    color:green !important;
    font-weight: bold;
}
th,td {
    text-align: right;
    padding: 2px 4px;
    border: 1px solid;
}
.connectedSortable tr, .ui-sortable-helper {
    cursor: move;
}
.connectedSortable tr:first-child {
    cursor: default;
}
.ui-sortable-placeholder {
    background: yellow;
}

.horizontal {
  float: left;
}

.vl {
  border-left: 6px solid blue;
  height: 500px;
}

JavaScript

$(document).ready(function() {

    var $tabs=$('#table-draggable2')
    $( "tbody.connectedSortable" )
        .sortable({
            connectWith: ".connectedSortable",
            items: "> tr:not(:first)",
            appendTo: $tabs,
            helper:"clone",
            zIndex: 999990,
            stop: () => {
              // put here the code for updating the data source
            }
        })
        .disableSelection()
    ;
    
    var $tab_items = $( ".nav-tabs > li", $tabs ).droppable({
      accept: ".connectedSortable tr",
      hoverClass: "ui-state-hover",
      
      drop: function( event, ui ) {
        return false;
      }
    });
    
});