jQuery UI Sortable-确定哪个元素在被拖动的元素下方 [英] jQuery UI Sortable - Determine which element is beneath the element being dragged

问题描述

我已经在一个简单的无序列表上实现了jQuery UI的Sortable插件.有什么方法可以确定要拖动的元素下面的哪个元素?

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?

在此屏幕快照中，Row 3, column 1悬停在Row 2-3, column 1上.在这种情况下;我需要掌握Row 2-3, column 1.

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.

_{(来源: roosteronacid.com )}

_{(source: roosteronacid.com)}

推荐答案

我通过拖动时监听mousemove事件，提出了解决方案.在mousemove上，它检查sortables中的所有元素以及当前拖动的元素是否悬停在其上(以零公差与它相交-如果它被一个像素覆盖，则相交).该代码非常详尽，因此您可以看到正在执行的操作.如果可排序元素具有其宽度，边框等，则相交计算可能会有些偏差，因为在这种情况下width()和height()不会返回正确的值

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

这是一个演示: 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不仅限于可排序的项目，它可以是页面上的任何元素.

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

这篇关于jQuery UI Sortable-确定哪个元素在被拖动的元素下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！