jQuery UI不可見droppbles仍然接受可拖動

這是一個容易再現的問題。選中此的jsfiddle：http://jsfiddle.net/MichielCM/XEC9g/jQuery UI不可見droppbles仍然接受可拖動

<ul id="list1"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
</ul> 

<ul id="list2"> 
    <li>Hover me over the items</li> 
</ul> 

<div id="status"></div>

列表1中存在的拖放目標。它被設置爲最大高度，並且其溢出隱藏。 List2只有一個可拖動的項目。

$("#list1 li").droppable({ 
    greedy: true, 
    tolerance: "pointer", 
    over: function(event, ui) { 
     $("#status").text(
      "Hovering over: ".concat($(this).text()) 
     ); 
    } 
}); 

$("#list2 li").draggable();

現在，從list2中拖動的項目時在droppables列表（列表1）中，「上方」事件對於每一個目標被激活。這甚至發生在由於固定高度而不顯示的不可見項目中。這些物品也會觸發'掉落'事件，所以實際上可以將物品放在不可見目標上！

任何優雅的方法來防止這種情況？謝謝。

來源

2013-04-17 Michiel Meulendijk

我解決了它。類似的行爲記錄在以下錯誤報告中。它還包含計算元素的實際位置和高度的解決方法。 http://bugs.jqueryui.com/ticket/8477

雖然我採取了一種更簡單的方法。通過捕獲容器元素的mouseenter和mouseleave事件，我可以確定鼠標實際上懸停在列表中，因此可見項。剩下的就是使用列表元素上的一個類作爲布爾值。

$("#list1").live({ 
    "mouseenter": function(event, ui) { 
     $(this).addClass("over"); 
    }, 
    "mouseleave": function(event, ui) { 
     $(this).removeClass("over"); 
    } 
}); 

$("#list1 li").droppable({ 
    greedy: true, 
    tolerance: "pointer", 
    over: function(event, ui) { 
     if ($(this).closest("ul").hasClass("over") { 
      $("#status").text(
       "Hovering over: ".concat($(this).text()) 
      ); 
     } 
    } 
}); 

$("#list2 li").draggable();

來源

2013-04-18 08:36:57

我有一個類似的問題，並相信我找到了一個更簡單的解決方案。可以簡單地將一個函數傳遞給droppable函數的accept屬性，該函數返回一個布爾值，表示是否應該接受放置。

http://api.jqueryui.com/droppable/#option-accept

在我的情況下，有許多方法可以計算出目標是否符合一個班輪可見。

來源

2013-09-24 01:57:31

jQuery UI不可見droppbles仍然接受可拖動

回答

相關問題