jQuery 可拖动，当拖放到父 div 之外时发生事件

Question

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

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

因此，当将 li 拖到 .photos 之外时，它会触发添加类，然后如果它被拖放到它之外，则会触发事件以将其删除。

Answer 1

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

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

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

更新（参见注释）

您可以为revert选项提供回调函数。该函数可以采用一个参数，该参数要么包含可拖动对象被放置在其上的可放置对象，要么包含 false （如果它被放置在无效的地方）：

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

这是一个 工作示例。