JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<table id="bigtable">
    <tr>
        <td>
            <table id="sorTable">
                <tr>
                    <th id="th1">test A</th>
                    <th id="th2">test B</th>
                    <th id="th3">test C</th>
                </tr>
                <tr>
                    <td>aaaaaaaaaa</td>
                    <td>bbbbbbbbbbbbb</td>
                    <td>cccccccc</td>
                </tr>
                <tr>
                    <td>aaaaaaaaaa</td>
                    <td>bbbbbbbbbbbbb</td>
                    <td>cccccccc</td>
                </tr>
                <tr>
                    <td>aaaaaaaaaa</td>
                    <td>bbbbbbbbbbbbb</td>
                    <td>cccccccc</td>
                </tr>
            </table>
            <br/>
            <br/>
            <div id="trash">
                <p>ceci est une poubelle</p>
            </div>
        </td>
    </tr>
            
</table>

CSS

li { cursor: move; }
#bigtable { border-collapse:separate;}
#sorTable{
    border:1px dotted gray;
}
#sorTable td{
    padding:5px;
    border:1px solid navy;
}

#trash {
    border:2px solid red;
}

JavaScript

$(document).ready(function(){

    $('#trash').hide();
    
    //make table th draggable
    $("#sorTable th").draggable({
        revert:"invalid",
        revertDuration:"150",
        connectWith:"#trash",
        start:function(){
            $('#trash').fadeIn(500);
        },
        stop:function(){
            $('#trash').hide();
        }
    });
    
    //connect with trash
    $("#trash").droppable({
        accept:"#sorTable th",
        drop: function(event, ui){
            var theTh = ui.draggable;
            var column = theTh.itsColumn();
            column.remove();
            $('#trash').hide();
        }
    });
    
    
(function($){ 
        $.fn.itsColumn=function(){   
            var index = $(this).index();
            var table = $(this).closest("table");
            if(typeof table == "undefined")return;
            var column = table.find("tr th:nth-child("+(index+1)+"), tr td:nth-child("+(index+1)+")");
            return column;
        }; 
})(jQuery);
    
    
    
    
 $("#deleteArea").droppable({
 accept: '#namelist > li',
 hoverClass: 'dropAreaHover',
 drop: function(event, ui) {
 deleteImage(ui.draggable,ui.helper);
 },
 activeClass: 'dropAreaHover'
 });
 function deleteImage($draggable,$helper){
 params = 'PID=' + $draggable.attr('id');
 $.ajax({
 url: 'deleteImage.php',
 type: 'POST',
 data: params
 });
 $helper.effect('transfer', { to: '#deleteArea', className: 'ui-effects-transfer' },500);
 $draggable.remove();
 }
});