Question

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

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

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不限于可排序的项目，它可以是页面上的任何元素。

Answer 2

如果您正在寻找的是可拖动的悬停（或其子/父），那么我发现在事件处理程序中，this是它悬停的元素。因此，您可以编写$(this)来获取一个可以使用的spiffy jQuery可排序对象。比烹饪许多鼠标事件处理程序容易得多！

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

2 个答案: