JSFiddle - React, Tailwind, and code Playground

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,
        update: function(event, ui) {
            $(ui.item).droppable({
                greedy: true,
                drop: function(event, ui) {
                    $(this).remove();
                }
            });
        }
    });
    $(".drag-image").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
    $("ul, li").disableSelection();
});