我有一组嵌套的 jQuery droppables...一个包含大部分页面的外部 droppables 和一组嵌套的内部 droppables 在页面上。我想要的功能是:
如果 draggable 被放置在任何内部 droppable 之外，它应该被外部 droppable 接受。
如果 draggable 被放到任何内部 droppable 上，它不应该被外部 droppable 接受，无论内部 droppable 是否接受 draggable。
所以如果我能保证 1+ 个内部 droppables 会接受 draggable，那会很容易，因为 greedy 属性会确保它只会被触发一次。不幸的是，大多数情况下，内部的 droppable 也会拒绝 draggable，这意味着贪心选项并没有真正的帮助。
总结:基本功能是一组有效/无效的内部可放置对象来接受可拖动对象，但是当您将可拖动对象扔到任何可拖动对象之外时，它会被外部可放置对象破坏。
这样做的最佳方法是什么？
最佳答案
要做到这一点，您不能使用内置的 accept 选项，因为如果 draggable 是，那不会触发当前 droppable 的 drop 事件不接受者，因此将传播到父级 droppable。
所以最好的方法是实现自己的接受检查，这相当简单:
$('#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 上看到上面的工作原理.
关于javascript - jQuery 嵌套 Droppable，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3631300/