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

【问题标题】：jQuery draggable, event when dropped outside of parent divjQuery 可拖动，放置在父 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
        }
    }
});

【讨论】：