JSFiddle - React, Tailwind, and code Playground

by Adam Picitelli

HTML

<ul class="items">
    <li class="item first-level">Item #1</li>
    <li class="item second-level">Item #2</li>
    <li class="item second-level">Item #3</li>
    <li class="item first-level">Item #4</li>
    <li class="item first-level">Item #5</li>
</ul>

<ul class="items">
    <li class="item">Add new item</li>
</ul>

CSS

.items {
    list-style: none outside none;
    margin-bottom: 20px;
    padding: 0;
}
.item {
    background: #fff;
    border: 1px solid #ddd;
    cursor: move;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    width: 480px;
}
.second-level {
    margin-left: 20px;
    width: 460px;
}
.dragHover {
    border-color: blue;
    color: blue;
}
.placeholder {
    background: #fff;
    border: 1px dashed #ccc;
    height: 50px;
	width: 500px;
}

JavaScript

$(".items").sortable({
    connectWith: ".items",
    placeholder: "placeholder",
    update: function(event, ui) {
        // update
	},
	sort: function(event, ui) {
        // sort
    }
});
$(".item").droppable({
    accept: ".item",
    hoverClass: "dragHover",
    drop: function( event, ui ) {
        console.log('drop');
        if (ui.position.left >= 20) {
            $(this).removeClass("first-level");
            $(this).addClass("second-level");
        } else {
            $(this).removeClass("second-level");
            $(this).addClass("first-level");
        }
    },
    over: function( event, ui ) {
        // over
    },
    activate: function( event, ui ) {
        // activate
    }
});