javascript - 在 jQuery UI sortable 中，如何获取拖动元素下方的元素

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 上，我可以 Hook 什么事件以获取元素 1 下的元素(在本例中是元素 2，但也可能是元素 3、4 或 5。)

注意:鼠标悬停事件为我提供了我正在拖动的元素(在本例中为元素 1)，而不是它下面的元素(在本例中为元素 2)。所以，据我所知，这不是一个选项。

我已经包含了一个 jsFiddle:

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

Answer 1

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

我写了一个 quick'n'dirty 解决方案:

$("#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);
});

Working Fiddle

请注意以下几点:

• 您可以缓存 jQuery 选择器以提高性能
• 自从你的 fiddle 使用 jQuery 1.6.4 (!)，我使用了 .live() ，自 jQuery 1.7 起已弃用。你应该使用 .on()相反。
• 此代码不采用当前拖动的元素大小。因此，只检查鼠标位置，而不是整个 <li>。元素边界。