JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="ul1">
    <li class="item">one</li>
    <li class="item">two</li>
    <li class="item">three</li>
    <li class="item">four</li>
    <li class="output"></li>
</ul>
<ul id="ul2">
    <li class="item">five</li>
    <li class="output"></li>
</ul>

<ul id="ul3">
    <li class="item">one</li></ul>

CSS

ul { 
    float: left; 
    border: 1px solid red;
    padding: 2px;
    margin-left: 10px;
}

li {
    border: 1px solid black;
    padding: 5px;
    margin-top: 5px;
    width: 200px;
}
li.item {
    background: yellow;
}
li div + div {
    margin-top: 1px;
    padding-top: 1px;
    border-top: 1px dotted #999;
}

JavaScript

$('ul').sortable({
    item: '.item',
    connectWith: 'ul',
    change: function(event, ui) { 
        $(this).find('li.output').prepend('<div> CHANGE '+$(ui.item).text()+'</div>');
    },
    over: function(event, ui) { 
        $(this).find('li.output').prepend('<div> OVER '+$(ui.item).text()+'</div>');
    }
});