Question

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

如果在任何内部droppables之外删除了一个draggable，它应该被外部droppable接受。
如果拖拽落在任何内部droppable上，外部droppable不应接受它，无论内部droppable是否接受draggable。

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

总结：基本功能是一组有效/无效的内部droppables来接受draggable，但是当你在任何一个draggables之外扔掉draggable时，它会被外部droppable破坏。

这样做的最佳方式是什么？

Answer 1

为了能够这样做，你不能使用内置的accept选项，因为如果draggable不是accepter，那么它不会触发当前dropable的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上看到上述内容的工作原理。

jQuery嵌套Droppables

1 个答案: