jQuery 可拖动，放置在父 div 之外时的事件

Posted 2023-05-08

【中文标题】jQuery 可拖动，放置在父 div 之外时的事件

【英文标题】：jQuery draggable, event when dropped outside of parent div

【发布时间】：2012-03-08 04:56:42

【问题描述】：

我有一个照片列表，并且我添加了可拖动的，但是当照片被拖动到父 div 之外时，我想更改它的类，以便它表明如果你放下它，它将被删除，然后当用户放下它时，我希望它触发一个功能。 （仅当它在父 div 之外）

<ul class="photos">
<li><img src=""/></li>
<li><img src=""/></li>
</ul>

所以当一个 li 被拖到 .photos 之外时，它会触发添加类，然后如果它被放到它之外，那么它会触发并删除它。

【参考方案1】：

假设您提到的父 div 是可放置的，您可以将事件处理程序绑定到 dropout 事件：

$("#parentDiv").on("dropout", function(event, ui) 
    //ui.draggable refers to the draggable
);

只要将接受的可拖动对象拖动到可放置对象的容差区域之外，就会触发该事件。

更新（见 cmets）

您可以为revert 选项提供回调函数。该函数可以采用一个参数，该参数包含拖放可拖动对象的可拖放对象，或 false（如果将其拖放到无效的位置）：

$("#draggable").draggable(
    revert: function(valid) 
        if(!valid) 
            //Dropped outside of valid droppable
        
    
);

这是working example。

【讨论】：

这适用于向其中添加类，但是如何检测它何时真正被删除？

当您将它拖到可放置对象之外时触发。我认为这就是你想要的，所以当它被拖到 droppable 之外时，你可以向它添加一个类？

是的，但我如何检测它何时真正掉到外面？