JSFiddle - React, Tailwind, and code Playground

by nimeshrmr

HTML

<div id="draggable" class="ui-widget-content">
    <table>
        <div class='draggable' id='1'>
            <div>Adam</div><div>3</div>
        </div>
        <div class='draggable' id='2'>
            <div>Mark</div><div>4</div>
        </div>
    </table>
</div>
            
<div id="draggable" class="ui-widget-content">
     <table>
        <div class='draggable droppable' id='4'>
            <div>Adam</div><div>3</div>
        </div>
        <div class='draggable droppable' id='5'>
             <div>Mark</div><div>4</div>
         </div>
    </table>
 </div>
            
            <div class='droppable'>
                
            </div>

CSS

#draggable { width: 150px; height: 150px; padding: 0.5em; }
.draggable{width:150px;float:left;border:1px solid;}
.droppable{width:350px;border:1px solid;height:100px;}

JavaScript

$( ".draggable" ).draggable({appendTo: "body",
                             helper: "clone"}
);

$( ".droppable" ).droppable({
            drop: function( event, ui ) {
                alert(ui.draggable.attr('id'));
                alert($(this).attr("id"));
            }
  
        });