JSFiddle - React, Tailwind, and code Playground

by Tilwin Joy

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<div class="mydraggable">I am First<span class="myhandler">DRAG</span>

</div>
<div id="sortable" class="mysortable"></div>

CSS

#sortable {
    width:200px;
    height:200px;
    background:hotpink;
}

JavaScript

$('.mydraggable').draggable({
    connectToSortable: ".mysortable",
    helper: "clone",
    revert: "invalid",
});

$(".mysortable").sortable({
    placeholder: "highlight_me",
    cursor: "move",
    handle: ".myhandler",
    revert: true,
    update: function (event, ui) {
        $(ui.item).addClass('ui-sortable');
        $(this).sortable("refresh");
    }
});