JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css">
<ul id="list1">
    <li>item 1</li>
    <li>item 2</li>
    <li>
        <ul id="list3">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>
    </li>
</ul>

<ul id="list2">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

CSS

ul {
    float:left;
    width:100px;
    height:100%;
    background-color:#e0e0e0;
}

.placeholder {
    border: 1px dashed black;
}

JavaScript

$('ul').sortable({
    placeholder: 'placeholder',
    connectWith: '#list1, #list2, #list3',
    over:function() {
        console.log('over '+$(this).attr('id')+'!');
        
    },
    receive: function() {
        console.log('reveived on  '+$(this).attr('id')+'!');
    }
});