JSFiddle - React, Tailwind, and code Playground

by thomas_david88

HTML

<label>Cursor At:</label><label id="cursor"></label>

<ul class="dragcategorie">
    <li class="dragcategories first-level">Item #1</li>

    <li class="dragcategories first-level">Item #4</li>
    <li class="dragcategories  first-level">Item #5</li>
</ul>

CSS

.dragcategorie {
    list-style: none outside none;
    margin-bottom: 20px;
    padding: 0;
    width:480;
}
.dragcategories {
    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;
}

.placeholder-sub {
    background: #fff;
    border: 1px dashed #ccc;
    height: 50px;
	width: 480px;
    margin-left: 20px;
}

JavaScript

$(".items").sortable({
    connectWith: ".items",
    placeholder: "placeholder",
    update: function(event, ui) {
        // update
	},
    start: function(event, ui) {
        if(ui.helper.hasClass('second-level')){
            ui.placeholder.removeClass('placeholder');
            ui.placeholder.addClass('placeholder-sub');
        }
        else{ 
            ui.placeholder.removeClass('placeholder-sub');
            ui.placeholder.addClass('placeholder');
        }
    },
	sort: function(event, ui) {
        var pos;
        if(ui.helper.hasClass('second-level')){
            pos = ui.position.left+20; 
            $('#cursor').text(ui.position.left+20);
        }
        else{
            pos = ui.position.left; 
            $('#cursor').text(ui.position.left);    
        }
        if(pos >= 32 && !ui.helper.hasClass('second-level')){
            ui.placeholder.removeClass('placeholder');
            ui.placeholder.addClass('placeholder-sub');
            ui.helper.addClass('second-level');
        }
        else if(pos < 25 && ui.helper.hasClass('second-level')){
            ui.placeholder.removeClass('placeholder-sub');
            ui.placeholder.addClass('placeholder');
            ui.helper.removeClass('second-level');
        }
    }
});
$(".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
    }
});