jQuery UI Sortable - Determine which element is beneath the element being dragged [closed]

Question

I've implemented jQuery UI's Sortable plug-in on a simple unordered list. Is there any way to determine which element is beneath the element being dragged?

In this screenshot Row 3, column 1 is hovering over Row 2-3, column 1. In this case; I would need to get hold of Row 2-3, column 1.

_{(source: roosteronacid.com)}

Answer 1

I made a solution by listening to the mousemove event while dragging a sortable. On mousemove, it checks all the elements in sortables and whether or not the currently dragged element hovers over it (intersects with it with zero tolerance - if it covers the element by one pixel, it intersects). The code is pretty elaborate so you can see what is being done. If the sortable elements has its width, border etc, the intersection-calculation could be a little off, since width() and height() don't return the correct values in this case

Here's a demo: http://jsfiddle.net/Vwd3r/2/

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 d = {
        top: draggedItem.position().top,
        bottom: draggedItem.position().top + draggedItem.height(),
        left: draggedItem.position().left,
        right: draggedItem.position().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;
    });
};

Note that sortables is not restricted to sortable items, it can be any element on the page.

Answer 2

If what you're looking for comes down to the sortable the draggable is hovering over (or its children/parents) then I find that inside an event handler, this is the element that it's hovering over. So you can write $(this) to get a spiffy jQuery sortable object to work with. Much easier than cooking up lots of mouse event handlers!