JSFiddle - React, Tailwind, and code Playground

by bhealy

HTML

<table class="mytable" id='table1'>  
                <tbody class="connectedSortable">  
                    <tr id="table1">
                        <th>col1</th>
                        <th>col2</th>  
                        <th>col3</th>  
                        <th>col4</th>  
                    </tr>
                    <tr id="table1">   
                        <td>a</td>                                                                                         
                        <td>b</td>                                                              
                        <td>c</td>  
                        <td>d</td>                                                                  
                    </tr>  
                    <tr id="table1">  
                        <td>e</td>                                                                                         
                        <td>f</td>                                                              
                        <td>g</td> 
                        <td>h</td>                                                                
                    </tr>  
                </tbody> 
            </table>
            <table class="mytable" id='table2'>  
                <tbody class="connectedSortable">  
                    <tr id="table2">
                        <th>COL1</th>  
                        <th>COL2</th>  
                        <th>COL3</th>  
                        <th>COL4</th>  
                    </tr>
                    <tr id="table2">   
                        <td>1</td>                                                                                         
                        <td>2</td>                                                              
                        <td>3</td>  
                        <td>4</td>                                                                  
                    </tr>  
                    <tr id="table2"> ...

CSS

.mytable a:link {
    color: #fff;
    font-weight: bold;
    text-decoration:none;
}
.mytable a:visited {
    color: #fff;
    font-weight:bold;
    text-decoration:none;
}
.mytable a:active,
.mytable a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
table.mytable{
    width:90%;
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    margin-left:auto;
    margin-right:auto;
    font-size:12px;
    background:#eaebec;
    border:#ccc 1px solid;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
}
.mytable th {
    color:#fff;
    padding:21px 25px 22px 25px;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
    background:#191970;
}
.mytable th:first-child{
    text-align: center;
    padding-left:20px;
}
.mytable tr{
    text-align: center;
    padding-left:20px;
}
.mytable tr td:first-child{
    text-align: center;
    padding-left:20px;
    border-left: 0;
}
.mytable tr td {
    padding:18px;
    border-top: 1px solid #ffffff;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafa    fa));
    background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
.mytable tr.even td{
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6    f6));
    background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
.mytable tr:last-child td{
    border-bottom:0;
}
.mytable tr:last-child td:first-child{
    -moz-border-radius-bottomleft:3px;
    -webkit-border-bottom-left-radius:3px;
    border-bottom-left-radius:3px;
}
.mytable tr:last-child td:last-child{
    -moz-border-radius-bottomright:3px;
    -webkit-border-bottom-right-radius:3px;
    border-bottom-right-radius:3px;
}
.mytable tr:hover...

JavaScript

$(document).ready(function(){
    var startTable = "table1";
    var $tabs=$("#" + startTable);
    $( "tbody.connectedSortable")
    .sortable({
        connectWith: ".connectedSortable",
        items: "> tr:not(:first)",
        appendTo: $tabs,
        helper:"clone",
        cursor:"move",
        zIndex: 999990
    })
    .disableSelection()
    ;
    $($tabs).droppable({
        accept: ".connectedSortable tr",
        hoverClass: "ui-state-hover",
        drop:function(event, ui){
            var start= ui.draggable.attr("id");
            var desTable = $(this).attr("id");
            //alert("start: " + start + "   desTable: " + desTable);
            if(start != desTable){
                alert("The ajax should be called");
            }
            return false;
        }
    });
    
    var startTable2 = "table2";
    var $tabs2=$("#" + startTable2);
    $( "tbody.connectedSortable")
    .sortable({
        connectWith: ".connectedSortable",
        items: "> tr:not(:first)",
        appendTo: $tabs2,
        helper:"clone",
        cursor:"move",
        zIndex: 999990
    })
    .disableSelection()
    ;
    $($tabs2).droppable({
        accept: ".connectedSortable tr",
        hoverClass: "ui-state-hover",
        drop:function(event, ui){
            var start= ui.draggable.attr("id");
            var desTable = $(this).attr("id");
            //alert("start: " + start + "   desTable: " + desTable);      
            if(start != desTable){
                alert("The ajax should be called");
            }
            return false;
        }
    });

});