javascript - jQuery嵌套Droppables

我有一组嵌套的jQuery droppables ...一个包含整个页面大部分内容的外部droppable和一组在页面上嵌套的内部droppables。我想要的功能是：


如果将可拖动对象放置在任何内部可放置对象之外，则外部可放置对象应接受该对象。
如果将可拖动对象拖放到任何内部可放置对象上，则无论内部可放置对象是否接受该可拖动对象，外部可放置对象都不应接受该对象。


因此，如果我可以保证1个以上的内部droppables可以接受draggable，这将很容易，因为greedy属性将确保仅触发一次。不幸的是，在大多数情况下，内部的可放置对象也会拒绝可拖动对象，这意味着贪婪选项并没有真正的帮助。

简介：基本功能是一组有效/无效的内部droppable来接受可拖动对象，但是当您将可拖动对象扔到任何可拖动对象之外时，它会被外部droppable破坏。

最好的方法是什么？

最佳答案

为此，您不能使用内置的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上查看以上内容的工作原理。