Jquery UI - 允许 droppable 具有可阻止的 div

Question

我不确定如何实现我想要做的事情。我在这里设置了一个示例:

http://jsfiddle.net/zs6US/

$('.draggable').draggable({
    revert: 'invalid'
});
$('#droppable').droppable({
    accept: '.draggable'
});

绿色框是有效的可放置元素。红框则不然。如果将可拖动对象放在红色上，即使是在绿色上方的红色，我希望它无效并恢复。在示例中这不起作用。

这可以实现吗？我梳理了 API 和其他问题，但未能找到答案。

Answer 1

只需将两个元素添加到可放置类型中，然后检查它所放置的元素。如果它是阻止，则恢复。

http://jsfiddle.net/zs6US/12/

$('.draggable').draggable({
    revert: 'invalid'
});

$('#droppable, #block').droppable({
    accept: '.draggable',
    drop: function( event, ui ) {
        if (this.id == 'block') {
            ui.draggable.draggable({ revert: true  });
        } else {
            ui.draggable.draggable({ revert: "invalid"});
        }
    }
});