JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script> 

<!-- Drag the sortable onto the droppable.  The over event on the
droppable will create a new droppable.  Sometimes you are able to
drop the sortable item onto the newly created droppable and
sometimes you are not. -->

<div>
    <ul id="sortable">
        <li>Sortable</li>
    </ul>
</div>
<div>
    <ul id="droppable">
        <li>Droppable</li>
    </ul>
</div>

CSS

div { float: left; }
li {
    background-color: cyan;
    padding: 5px;
    margin: 5px;
}
li:hover { cursor: move; }
li.drophover { background-color: red; }

JavaScript

$( "#sortable" ).sortable();

$( "#droppable li" )
    .droppable({
        hoverClass: "drophover",
        over: function() {
            var $new = $( "<li>New Droppable</li>" );
            $( "#droppable" ).append( $new );
            $new.droppable({
                hoverClass: "drophover",
                drop: function() {
                    alert( "Successful drop" );
                }
            });
        }
    });