JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<table id="bigtable">
    <tr>
        <td>
            <p>Drag and drop list items to sort them out</p>
            <ul id="namelist">
             <li id='i_1'>Image 1</li>
             <li id='i_2'>Image 2</li>
             <li id='i_3'>Image 3</li>
             <li id='i_4'>Image 4</li>
            </ul>
            <div id="deleteArea">
            Drag here to delete.
            </div>
        </td>
        <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/>
            <div id="trash">
                ceci est une poubelle
            </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;
}

JavaScript

jQuery(document).ready(function($){
 $("#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"
    });
    
    //connect with trash
    $("#trash").droppable({
        accept:"#sorTable th",
        drop: function(event, ui){
            var theTh = ui.draggabel;
            
        }
    });
    
    
 $("#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();
 }
});