JSFiddle - React, Tailwind, and code Playground

by aaronallport

HTML

<div id="dropTarget">
    <ul>
        <li>Drag items to my list</li>         
    </ul>
</div>

<div id="sourceList">
    <ul>
        <li>Item 1</li>
        <li>Item 2<ul></ul></li>
        <li>Item 3</li>        
    </ul>
</div>

CSS

#dropTarget {
    border: 1px solid #ff0000;
    margin-bottom: 20px;
}

#sourceList {
    border: 1px solid #00ff00;
}

JavaScript

var clone;
var before;
var parent;

$("#dropTarget ul").sortable({
    connectWith: "#dropTarget ul",
    revert: true,
    helper: "clone"
});

$("#sourceList ul").sortable({
    connectWith: '#dropTarget ul',
    revert: true,
    helper: "clone",

    start: function(event, ui) {
        // Clone the item being dragged
        $(ui.item).show();
        clone = $(ui.item).clone();
        before = $(ui.item).prev();
        parent = $(ui.item).parent();
    },

    stop: function(event, ui) {
        // Insert the clone of item being dragged back into the source list
        if (before.length === 0) {
            parent.prepend(clone);
        }
        else {
            before.after(clone);
        }
    },

    remove: function(event, ui) {
        // Insert the clone of item being dragged back into the source list
        if (before.length == 0) {
            parent.prepend(clone);
        }
        else {
            before.after(clone);
        }
    }
});