JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<ul class="dragelem">
    <li class="drag-image" ><span>1</span></li>
    <li class="drag-image" ><span>2</span></li>
</ul>

<ul id="sortable" class="drop">

</ul>

CSS

.dragelem {
    border: 1px dashed black;
    height: 200px;
}
.drop {
    border: 1px dashed blue;
    height: 200px;
}
.drag-image {
    cursor: pointer;
}
.drag-image span {
    font-size: 32px;
    border: 1px solid black;
}

JavaScript

$(function() {
    $("#sortable").sortable({
        revert: true,
        receive: function(event, ui) {
            var len = ($(this).sortable('toArray').length);
            if (len > 5) {
                $(this).sortable('cancel');
            }
        }
    });
    $(".drag-image").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
    $("#sortable").droppable({
        greedy: true
    });
    $("#sortable").bind('drop', function(event, ui) {
        if (!ui.draggable.hasClass('ui-sortable-helper')) {} else {
            $(ui.draggable).remove();
        }
        return false;
    });
    $("ul, li").disableSelection();
});