jquery-ui - jQuery UI Sortable - 确定哪个元素在被拖动的元素下方

Question

关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。












想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。

8年前关闭。




Improve this question




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

在此屏幕截图中 Row 3, column 1悬停在 Row 2-3, column 1 .在这种情况下;我需要得到Row 2-3, column 1 .


(来源:roosteronacid.com)

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