jQuery可拖拽，当拖动到父级div外时触发事件。

Question

我有一组照片，并且已经添加了可拖动功能，但是当照片被拖到父级div之外时，我希望更改它的类以表示如果您放置它，它将被删除，然后当用户放置它时，我希望它触发一个函数。（仅在其位于父级div之外时）

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

当 li 元素被拖出 .photos 时，它将触发添加类的事件，如果它被拖动到外面，则会触发删除类的事件。

- Dylan Cross

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

这里有一个可运行的示例。

- James Allardice

---

这个可以用来添加类，但是怎么检测它何时被拖放了呢？ - Dylan Cross

当你把它拖出可放置区域时会触发该事件。我以为这就是你想要的，这样你就可以在可放置区域之外拖动时将一个类添加到可拖动元素？ - James Allardice

是的，我会，但是我如何检测它何时被拖到外面？ - Dylan Cross