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>AAAAAAAAA</td>
                    <td>BBBBBBB</td>
                    <td>CCCCCCCCCC</td>
                </tr>
                <tr>
                    <td>aaaaaaaaaa</td>
                    <td>bbbbbbbbbbbbb</td>
                    <td>cccccccc</td>
                </tr>
            </table>
            <br/>
            <div id="trash">
                ceci est une poubelle
            </div>
        </td>
    </tr>
            
</table>
<div><br/><br/><p>déplacez les entêtes dans la poubelle pour faire disparaître les colonnes</p></div>

CSS

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

#trash{
    border:3px red solid;
    text-align:center;
}

JavaScript

jQuery(document).ready(function($){
    
    $('#trash').hide();
    
 $("#namelist").sortable({
 connectWith: '#deleteArea',
 update: function(event, ui){
 //Run this code whenever an item is dragged and dropped out of this list
 var order = $(this).sortable('serialize');
 $.ajax({
 url: 'processImage.php',
 type: 'POST',
 data: order
 });
 }
 });
    
    //make table th draggable
    $("#sorTable th").draggable({
        revert:"invalid",
        revertDuration:"150",
        connectWith:"#trash",
        start:function(event,ui){
            $('#trash').delay(800).show();
        },
        stop:function(event,ui){
            $('#trash').hide();
        }
    });
    
    //connect with trash
    $("#trash").droppable({
        accept:"#sorTable th",
        drop: function(event, ui){
            var theTh = ui.draggable;
            var col = theTh.selectColumn();
            col.remove();
        }
    });

    
 $("#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();
 }
});


(function($)
{
    $.fn.selectColumn=function(parametres)
    {
       var index = $(this).index();
       var table = $(this).parentsUntil('table');
        var col = table.find("tr th:eq("+index+"), tr td:nth-child("+(index+1)+")");
       return col; 
    };
})(jQuery);