jQuery UI Sortable - 确定哪个元素在被拖动的元素下方[关闭]答案

【问题标题】：jQuery UI Sortable - Determine which element is beneath the element being dragged [closed]jQuery UI Sortable - 确定哪个元素在被拖动的元素下方[关闭]
【发布时间】：2011-03-18 22:37:19
【问题描述】：

我在一个简单的无序列表上实现了 jQuery UI 的 Sortable 插件。有什么方法可以确定被拖动的元素下方是哪个元素？

在此屏幕截图中，Row 3, column 1 悬停在Row 2-3, column 1 上。在这种情况下;我需要联系Row 2-3, column 1。

_{（来源：roosteronacid.com）}

【问题讨论】：

当你说“在下面”时，你是指被拖动的元素之后的下一个元素吗？还是浮动可拖动元素后面的元素？
.. 但是是的；浮动元素后面的元素。

标签： jquery-ui jquery-ui-sortable

【解决方案1】：

我通过在拖动可排序对象时收听mousemove 事件来提出解决方案。在 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 不限于可排序的项目，它可以是页面上的任何元素。

【讨论】：

这太棒了，需要更多的支持。

【解决方案2】：

如果您要查找的内容归结为可拖动对象悬停在的可排序对象（或其子项/父项），那么我发现在事件处理程序中，this 是它悬停的元素。所以你可以写$(this) 来获得一个漂亮的jQuery 可排序对象。比编写大量鼠标事件处理程序要容易得多！

【讨论】：