jquery - 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
        }
    }
});

这是一个工作示例。