jQuery UI Sortable - 确定被拖动元素下面的元素

Question

我在一个简单的无序列表上实现了jQuery UI的Sortable插件.有没有办法确定哪个元素位于被拖动的元素下面？

在这个截图Row 3, column 1中徘徊Row 2-3, column 1.在这种情况下; 我需要抓住Row 2-3, column 1.

http://roosteronacid.com/sortable.jpg

Answer 1

我通过mousemove在拖动可排序的同时收听事件来制定解决方案.在sortables鼠标移动时,它会检查所有元素以及当前拖动的元素是否悬停在它上面(与零相交的零容差 - 如果它将元素覆盖一个像素,它会相交).代码非常精细,因此您可以看到正在完成的工作.如果排序元素都有其宽度,边框等,路口,计算可能有点过,因为width()并height()没有在这种情况下返回正确的值

这是一个演示: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;
    });
};

请注意,sortables不限于可排序项目,它可以是页面上的任何元素.