JSFiddle - React, Tailwind, and code Playground

by princefiddle

HTML

<ul id="sortable">
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>

CSS

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }

JavaScript

$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid",
stop: function() {
        alert('test');
}
});
$( "ul, li" ).disableSelection();
});