jQuery UI Sortable - 確定被拖動元素下面的元素

我在簡單的無序列表上實現了jQuery UI的Sortable插件。有什麼方法可以確定被拖動的元素下面有哪個元素？jQuery UI Sortable - 確定被拖動元素下面的元素

在此屏幕截圖中，Row 3, column 1正徘徊在Row 2-3, column 1之上。在這種情況下;我需要掌握Row 2-3, column 1。

2010-07-21 roosteronacid

當你說「底下」時，你指的是被拖動之後的下一個順序元素嗎？或浮動拖動後面的元素？ – MarkD 2010-07-21 11:36:34

@MarkD：上傳圖片 – roosteronacid 2010-07-21 11:47:03

..但是;浮動元素背後的元素。 – roosteronacid 2010-07-21 11:55:57

我通過聆聽mousemove事件的同時拖動排序做出瞭解決方案。在mousemove上，它會檢查sortables中的所有元素，以及當前拖動的元素是否懸停在它上面（與零容差交叉 - 如果它覆蓋元素一個像素，它將相交）。代碼非常精細，所以你可以看到正在做什麼。如果排序元素都有其寬度，邊框等，路口，計算可能有點過，因爲width()和height()不要在這種情況下

這裏返回正確的值是一個演示：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不限於可排序項目，它可以是頁面上的任何元素。

來源

2010-08-06 23:48:03

這太棒了，需要更多的選票。 – Ally 2012-08-24 07:46:29

如果你要找的東西歸結爲可排序的可拖動的是懸停在（或其子女/父母），然後我發現在事件處理程序中，this是它徘徊的元素。所以你可以寫$(this)來得到一個漂亮的jQuery可排序對象。比烹飪大量的鼠標事件處理程序容易得多！

來源

2013-08-04 10:27:08 toon81

jQuery UI Sortable - 確定被拖動元素下面的元素

回答

相關問題