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

标签 jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

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

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

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

最佳答案

假设您提到的父 div 是可放置的,您可以将事件处理程序绑定(bind)到 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
        }
    }
});

这是一个working example .

关于jQuery 可拖动,当拖放到父 div 之外时发生事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9317293/

相关文章:

javascript - JQuery-热键和windows提示问题

javascript - JsTree:显示更多选项

javascript - 使用 jQuery 检索多个 DIV 的 ID 并存储在数组中

jquery - jquery ui 可拖动遏制是如何工作的?

jquery - 使用 YouTube Data API 获取视频时长?

jquery - 如何使用 hover droppable 函数获取元素的 id

jquery - 使用jQuery选择指定属性最小值的元素

javascript - jQuery UI 模态对话框 : button icons do not appear

javascript - jQuery 的可拖动网格

javascript - Jquery 拖动会在 mousemove 上触发,但不会在 mousedown 上触发