JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="draggable" data-id="1">Item 1</li>
    <li class="draggable" data-id="2">Item 2</li>
    <li class="draggable" data-id="3">Item 3</li>
    <li class="draggable" data-id="4">Item 4</li>
</ul>

<ul class="droppable"></ul>

CSS

ul {
    width: 200px;
}

li {
    height: 20px;
    line-height: 20px;
    background-color: #cdf;
    list-style: none;
}

.droppable {
    min-height: 20px;
    border: 1px dashed black;
}

.drop-placeholder {
    line-height: 20px;
    height: 20px;
}

JavaScript

$(function() {
    $('.draggable').draggable({
        revert: 'invalid',
        connectToSortable: '.droppable',
        helper: function(){
            return $(this).clone().width($(this).width());
        }
    });

    $('.droppable').droppable({
        accept: function(element) {
            return false;
        },
        drop: function(event, ui) {
            console.log('test');
        }
    });

    $('.droppable').sortable({
        helper: "clone",
        forceHelperSize: true,
        placeholder: 'drop-placeholder'
    });
});