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"
                });
            }
            
            /* Without this line, new droppables are not recognized by items from list2,
               with they get stuck after releasing the mouse.
               On IE it has no effect other than making them get stuck*/
            $("#list2 li").draggable({refreshPositions: true});
            //$("#list2").sortable("refreshPositions");
        }
    });
});