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上述作品。