JSFiddle - React, Tailwind, and code Playground

by anish274

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="drg">
Drag me
</div>

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

<ul id="drplist">
<li>Drop here<hr></li>
</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 );

$( "button" ).button().click(function() {
  $( "<li>Dynamic droppable<hr></li>" ).droppable( drpOptions ).appendTo( "#drplist" );
});