JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul id="list1">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
</div>
<div>
    <ul id="list2">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
</div>

CSS

div {
    display: inline-block;
    vertical-align: top;
}
li {
    display: block;
    background-color: cyan;
    padding: 5px;
    margin: 5px;
    cursor: pointer;
}
li.sep-prev, li.sep-next {
    background-color: blue;
}
li.drophover {
    background-color: red;
}

JavaScript

$(function() {
    $("#list2").sortable({
        connectWith: "#list1"
    }).disableSelection();
    $("#list1 li").draggable({
        revert: true,
        helper: "clone",
        revertDuration: 0,
        connectToSortable: "#list2",
        refreshPositions: true
    });
    $("#list1 li").droppable({
        hoverClass: "drophover",
        over: function(event, ui) {
            if ($(".sep-prev").size()) $(".sep-prev").insertBefore($(this));
            else {
                $("<li class='sep-prev'>&nbsp;</li>").insertBefore($(this));
                $(".sep-prev").droppable({
                    hoverClass: "drophover"
                });
            }
            if ($(".sep-next").size()) $(".sep-next").insertAfter($(this));
            else {
                $("<li class='sep-next'>&nbsp;</li>").insertAfter($(this));
                $(".sep-next").droppable({
                    hoverClass: "drophover"
                });
            }
            
            //$("#list2 li").draggable({refreshPositions: true});
            //$("#list2").sortable("refreshPositions");
        }
    });
});