在可排序的jQuery UI中，如何获取被拖动元素下方的元素

Question

假设您有5个元素，标记为项1，..，5。

这是说明此的示例代码：

   <ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
</ul>

如果将项目1拖到项目2上， 我可以挂入哪个事件以获取项目1下的元素（本例中为项目2，但可能是项目3或4或5）。

注意：Mouseover事件为我提供了要拖动的项目（在本例中为项目1），而不是在其下的项目（在本例中为项目2）。因此，这不是AFAIK选项。

我包括了一个jsFiddle：

http://jsfiddle.net/H6f2S/2/

Answer 1

我不认为jQuery UI可拖动API提供了这种方法。

我写了一个快速的'肮脏的解决方案：

$("#sortable .ui-sortable-helper").live('mousemove', function(e) {
    var x = e.clientX;
    var y = e.clientY;

    var hoveredElement;
    // Iterate through all draggable elements (not the current one, not the helper)
    $("#sortable > li:not(.ui-sortable-helper, .ui-sortable-placeholder)").each(function(_, li) {
        var $li = $(li);
        var liOffset = $li.offset();
        var height = $li.outerHeight();
        var width = $li.outerWidth();
        // Test if mouse is in block bounds
        if (y >= liOffset.top &&  y <= liOffset.top + height
            && x >= liOffset.left && x <= liOffset.left + width) {
            hoveredElement = $li;
            return false;
        }
    });
    console.log(hoveredElement);
});

工作小提琴

请注意以下几点：

• 您可以缓存jQuery选择器以提高性能
• 由于您的小提琴使用jQuery 1.6.4（！），所以我使用了.live() ，从jQuery 1.7开始不推荐使用。 您应该改用.on() 。
• 该代码不采用当前拖动的元素大小。 因此，仅检查鼠标位置，而不检查整个<li>元素边界。