JSFiddle - React, Tailwind, and code Playground

by jdb1991

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul id="sortable"> 
    <li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
    <li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
    <li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
</ul>

<ul id="bin">Bin</ul>
<div id="display"></div>

CSS

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 14px; height: 20px; }
#sortable li span { position: absolute; margin-left: -1.3em; }

#bin { text-align: center; margin: 0 3px 3px 3px; border: 1px solid black }

#display { text-align: center; margin: 0 3px 3px 3px; border: 1px solid black }

JavaScript

listOfItems = ["Item 1","Item 2","Item 3"];

$("#display").html(listOfItems.join(" "));

tmp = {};

$("#bin").sortable({
    receive: function(event, ui) {
        listOfItems.splice(tmp.key, 1);
        $("#sortable").sortable("refresh");
        $("#bin li").remove();
        $("#display").html(listOfItems.join(" "));
    }
});

$("#sortable").sortable({
    connectWith: $("#bin"),
    start: function(event, ui) {
        tmp["key"] = ui.item.index();
        tmp["obj"] = listOfItems[ui.item.index()];
    },
    stop: function(event, ui) {
        listOfItems.splice(tmp.key, 1);
        listOfItems.splice(ui.item.index(), 0, tmp.obj);
        $("#display").html(listOfItems.join(" "));
    }
});