JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<div id="drg">
Drag me
</div>

<hr>
<button>Click to add a droppable</button>

<ul id="drplist">

</ul>

CSS

#drg { background: silver; width: 100px; padding: 0.5em; text-align: center; }
ul, ul li { list-style: none; margin:0 ; padding: 0; }

#drplist li { width: 200px; height: 100px; margin: 1em; padding: 0.5em; background: lightgreen; }

button {
    float:right;
}

JavaScript

$( "#drg" ).draggable({
  revert: true,
    start: function() {
        $( "<li>Dynamic droppable during drag<hr></li>" ).droppable( drpOptions ).appendTo( "#drplist" );
    }
});

var drpOptions = {
  drop: function(event, ui) {
    $(this).append( ui.draggable.text() + "<br>" );
  }
};

//$( "#drplist" ).children().droppable( drpOptions );