JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<ul class="drag">
    <li class>link</li>
</ul>
<ul class="drop">
    <li>link</li>
    <li>
        <ul class="drop empty"></ul>
    </li>
</ul>

CSS

.drop { border:1px solid #333; padding:30px;}
.empty:before {
    content: 'test';
}

JavaScript

$('.drag li').draggable({
    helper: 'clone',
    cursor: "move",
    connectToSortable: '.drop'
});
$('.drop').sortable({
    start: function (event, ui) {
        console.log('start');
        if($(this).hasClass('empty'))
            $(this).removeClass('empty')
    },
    over: function (event, ui) {
        console.log('over');
        if($(this).hasClass('empty'))
            $(this).removeClass('empty')
    },
    out: function (event, ui) {
        console.log('out');
        if($(this).children().length == 2 || !$(this).hasClass('empty'))
            $(this).addClass('empty')
    },
    connectWith: '.drop'
});