jQuery嵌套Droppables

Question

我有一套嵌套的jQuery droppables ...一個外部droppable包含頁面的大部分和一組嵌套的內部droppables在頁面上。我想要的功能是：

• 如果拖動是任何內部droppables應該由外投擲的接受外下降。

• 如果可拖動內容被拖放到任何內部可拖動對象上，則不應該被外部可拖動對象接受，而不管內部拖放對象是否接受可拖動對象。

因此，這將是容易的，如果我能保證1+內droppables將接受拖動的，因爲貪婪屬性將確保它只會得到觸發一次。不幸的是，大多數情況下，內部投擲也會拒絕可拖動，這意味着貪婪選項並沒有真正的幫助。

摘要：基本功能是一組可接受可拖動的有效/無效內部可拖動元素，但當您將可拖動元素拖出任何可拖動元素時，它將被外部可拖動元素銷燬。

這樣做的最好方法是什麼？

Answer 1

爲了能夠做到這一點，你不能使用內置accept的選擇，因爲這將不會觸發drop事件當前可放開如果拖動是不是受主，併爲此將傳播到父可棄。

所以最好的辦法是實現自己接受檢查，這是相當簡單：

$('#foo').droppable({ 
    drop: function(e){ 
     console.log(e); 
    } 
}); 

var accepted = '#red'; 
$('#bar').droppable({ 
    greedy: true, 
    drop: function(e,ui){ 
     if (!$(ui.draggable).is(accepted)) { 
      return false; 
     } 
     console.log(e.target); 
    } 
}); 

你可以看到如何在jsFiddle上述作品。