jquery-ui - 如何取消 jQuery droppable 的放置操作？

Question

我有一个 jQuery UI droppable，它接受 Draggables。如果满足某些条件，我不想允许 drop 操作。

如何取消放置操作并执行类似还原操作？

Answer 1

可放置小部件上的accept选项：

与选择器匹配的所有可拖动对象都将被接受。如果指定了函数，将为页面上的每个可拖动对象调用该函数（作为第一个参数传递给函数），以提供自定义过滤器。如果应接受可拖动对象，则该函数应返回 true。

结合revertdraggable 上的选项应该可以满足您的需求：

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

$("#droppable").droppable({
    accept: function(el) {
        /* This is a filter function, you can perform logic here 
           depending on the element being filtered: */
        return el.hasClass('acceptable');
    }
});

请注意，在这个特定示例中，您还可以编写accept: ".acceptable"，这将使 droppable 只接受具有 class 的元素acceptable。因此，另一种选择是当您的自定义事件发生时，只需根据需要应用或删除acceptable该类。

这是一个例子：http: //jsfiddle.net/andrewwhitaker/rUgJF/3/

底部有一个切换“可接受性”的链接。