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);
});

Working Fiddle

请注意以下几点：

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

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

1 个答案: