在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.）

注意：鼠標懸停事件給我拖動的項目（在本例中爲項目1），而不是它下面的項目（在本例中爲項目2）。 ，這不是AFAIK的選項。

我已經包括的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選擇，以提高性能
• 由於你的小提琴使用jQuery 1.6.4（！），我用.live()，從jQuery 1.7開始已棄用。您應該改用.on()。
• 此代碼不包含當前拖動的元素大小。因此，只檢查鼠標位置，而不是整個<li>元素邊界。