jQuery可拖动，当放到父div之外时发生事件 [英] jQuery draggable, event when dropped outside of parent div

问题描述

我有一张照片列表，并且已将它们添加到其中，但是将照片拖到父div之外时，我想更改其类别，以便指示如果将其删除，则将其删除，然后当用户放下它时，我希望它触发一个功能. (仅在父div之外)

I have a list of photos, and I have draggable added to them, however when the photo is dragged outside of the parent div, I want to change it's class so it indicates that if you drop it, it will be removed, and then when the user drops it, I want it to fire a function. (only if it is outside of the parent div)

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

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

so when an li is dragged outside of .photos, it fires to add class, and then if it's dropped outside of it, then it fires and event to remove it.

推荐答案

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

Assuming the parent div you mention is a droppable, you can bind an event handler to the dropout event:

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

只要将接受的可拖动对象拖到可放置对象的公差范围之外，事件就会触发.

The event will fire any time an accepted draggable is dragged outside the tolerance area of the droppable.

更新(请参阅评论)

您可以为revert选项提供回调函数.该函数可以使用一个参数，该参数包含放置了可拖动对象的可放置对象或false(如果它被放置在无效的地方):

You can supply a callback function to the revert option. The function can take one argument which either contains the droppable on which the draggable was dropped, or false (if it was dropped somewhere invalid):

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

这是一个工作示例.

这篇关于jQuery可拖动，当放到父div之外时发生事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！