如何取消 jQuery droppable 的放置动作？

Posted 2023-05-08

【中文标题】如何取消 jQuery droppable 的放置动作？

【英文标题】：How to cancel a drop action for jQuery droppable?

【发布时间】：2011-06-30 03:32:51

【问题描述】：

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

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

【参考方案1】：

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

与选择器匹配的所有可拖动对象 将被接受。如果一个函数是 指定，该函数将被调用 对于页面上的每个可拖动对象（通过 作为第一个论据 函数），提供自定义过滤器。 如果 应该接受可拖动的。

结合可拖动的revert 选项应该可以满足您的需求：

$(".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 只接受类为 acceptable 的元素。因此，另一种选择是当您的自定义事件发生时，只需根据需要应用或删除 acceptable 类。

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

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