JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<ul id="draggable">
    <li>Hello</li>
    <li>Stack</li>
    <li>Overflow</li>
</ul>


<ul id="sortable"></ul>

CSS

#draggable, #sortable {
    float: left;
    width: 100px;
    margin: 30px;
}

#draggable li, #sortable li {
    margin-top: 5px;
    background-color: #aaa;
}
#sortable {
    border: 1px solid red;
    width:100px;
    height:100px;
}

JavaScript

$(function() {
    var transferred = false;
    $('#sortable').draggable();
    $('#draggable li').draggable({
        connectToSortable: '#sortable',
        helper: 'clone',
        start: function(event, ui)
        {
            //$(this).hide();
        },
        stop: function(event, ui)
        {
            if(!transferred)
                $(this).show();
            else
            {
                //$(this).remove();
                transferred = false;
            }
        }
    });

    $('#sortable').sortable({
        receive: function(event, ui)
        {
            transferred = true;
        }
    });
});