JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="sort">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<div id="status"></div>

CSS

ul { list-style: none }
li { margin-bottom:10px; width:100px; border:1px solid gray }

JavaScript

$(function() {

    var sortables = $("li");
    var draggedItem;

    $("#sort").sortable({
        start: function(event, ui) {
            draggedItem = ui.item;
            $(window).mousemove(moved);
        },
        stop: function(event, ui) {
            $(window).unbind("mousemove", moved);
        }
    });

    function moved(e) {

        //Dragged item's position++
        var dpos = draggedItem.position();
        var d = {
            top: dpos.top,
            bottom:    dpos.top + draggedItem.height(),
            left: dpos.left,
            right: dpos.left + draggedItem.width()
        };

        //Find sortable elements (li's) covered by draggedItem
        var hoveredOver = sortables.not(draggedItem).filter(function() {
            var t = $(this);
            var pos = t.position();

            //This li's position++
            var p = {
                top: pos.top,
                bottom:    pos.top + t.height(),
                left: pos.left,
                right: pos.left + t.width()
            };

            //itc = intersect
            var itcTop         = p.top <= d.bottom;
            var itcBtm         = d.top <= p.bottom;
            var itcLeft     = p.left <= d.right;
            var itcRight     = d.left <= p.right;

            return itcTop && itcBtm && itcLeft && itcRight;
        });

        $("#status").empty();
        hoveredOver.each(function() {
            $("#status").append("<p>" + draggedItem.html() + " hovers over " + this.innerHTML + "</p>");
        });
    };

});