JSFiddle - React, Tailwind, and code Playground

by jaygiri

HTML

<body>
<div id="alles">
<div class="dropzones" id="zone1"><div class="dragzones" id="drag1">Item 1</div></div>
<div class="dropzones" id="zone2"><div class="dragzones" id="drag2">Item 2</div></div>
<div class="dropzones" id="zone3"><div class="dragzones" id="drag3">Item 3</div></div>
<div class="dropzones" id="zone4"><div class="dragzones" id="drag4">Item 4</div></div>
    <div class="dropzones" id="zone11"></div>
    <div class="dropzones" id="zone12"></div>
    <div class="dropzones" id="zone13"></div>
    <div class="dropzones" id="zone14"></div>   
</div>
</body>

CSS

.dropzones {
    border: 1px dotted green;
    height: 1em;
    margin: 1em;
    padding: 3px;
}

.dragzones {
    border: 1px solid white;
    background-color: gray;
}

.occupied {
    border-color: red;
}

JavaScript

$ (init);
function init() {
    $(".dragzones").draggable({
        start: handleDragStart,
        cursor: 'move',
        revert: "invalid",
    });
    $(".dropzones").droppable({
        drop: handleDropEvent,
        tolerance: "touch",              
    });
    validateDropzones();
}
function handleDragStart (event, ui) {
    $(this).css('z-index', 9999);
}       
function handleDropEvent (event, ui) {
    if ($(this).hasClass('occupied')) {
        ui.draggable.draggable('option', 'revert', true);
        return false;
    }
    $(this).append(ui.draggable);
    ui.draggable.position({of: $(this), my: 'left top', at: 'left top'});
    ui.draggable.css('z-index', 0);
    setTimeout(validateDropzones, 0);
}

function validateDropzones() {
    $(".dropzones").each(function(){
        if ($(".dragzones", this)[0]) {
            $(this).addClass("occupied");
        } else {
            $(this).removeClass("occupied");
        }
    });
}