jQuery UI Sortable - 确定被拖动元素下面的元素

问题描述：

我在简单的无序列表上实现了jQuery UI的Sortable插件。有什么方法可以确定被拖动的元素下面有哪个元素？jQuery UI Sortable - 确定被拖动元素下面的元素

在此屏幕截图中，Row 3, column 1正徘徊在Row 2-3, column 1之上。在这种情况下;我需要掌握Row 2-3, column 1。

当你说“底下”时，你指的是被拖动之后的下一个顺序元素吗？或浮动拖动后面的元素？ – 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不限于可排序项目，它可以是页面上的任何元素。

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

答

如果你要找的东西归结为可排序的可拖动的是悬停在（或其子女/父母），然后我发现在事件处理程序中，this是它徘徊的元素。所以你可以写$(this)来得到一个漂亮的jQuery可排序对象。比烹饪大量的鼠标事件处理程序容易得多！

jQuery UI Sortable - 确定被拖动元素下面的元素

相关推荐