在发生 droppable 事件时将 jQuery 可拖动对象恢复到其原始容器 [英] Revert a jQuery draggable object back to its original container on out event of droppable

问题描述

我有一个可拖动的项目，如果不放在 droppable 中，它将恢复.这很有效，直到用户在 droppable 中放置一个项目.如果他们决定在任何时候都犯了错误，那么他们将可拖动对象拉出，它会恢复为可放置对象.我更喜欢关闭并停用可拖动对象返回其原始容器.

我的代码在下面，但我已经提供了一个关于 jsFiddle 的示例.

HTML

<div id="draggable" class="ui-widget-content"><p>当我没有掉线时我会回复</p>

<div id="droppable" class="ui-widget-header"><p>把我放在这里</p>

JavaScript

$(function() {$("#draggable").draggable({恢复:功能(删除){var 下降 = 下降 &&丢弃[0].id ==可丢弃"；if(!dropped) alert("我正在恢复！");返回 !dropped;}}).each(函数(){var top = $(this).position().top;var left = $(this).position().left;$(this).data('orgTop', top);$(this).data('orgLeft', left);});$("#droppable").droppable({activeClass: 'ui-state-hover',悬停类:'ui-state-active'，下降:功能(事件，用户界面){$(this).addClass('ui-state-highlight').find('p').html('Dropped!');},出:功能(事件，用户界面){//不起作用，但像这样ui.draggable.mouseup(函数(){var top = ui.draggable.data('orgTop');var left = ui.draggable.data('orgLeft');ui.position = { 顶部:顶部，左侧:左侧 };});}});});

解决方案

• 已测试，使用 jquery 1.11.3 和jquery-ui 1.11.4

• 演示: http://so.lucafilosofi.com/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-d 事件/

$(function() {$("#draggable").draggable({恢复:功能(事件，用户界面){//在旧版本的 jQuery 上使用draggable"；//$(this).data(可拖动")//在 2.x 版本的 jQuery 上使用ui-draggable"；//$(this).data(ui-draggable")$(this).data("uiDraggable").originalPosition = {顶部:0，左:0};//返回布尔值返回！事件；//评估如下://返回事件 !== false ?假:真；}});$(#droppable").droppable();});

I have a draggable item which if not dropped in a droppable will revert. This works well until a user drops an item in the droppable. If they decide they've made a mistake anytime they pull the draggable out it reverts to the droppable. I would prefer that on out and deactivate the draggable goes back to its original container.

My code is below but I have provided a sample on jsFiddle.

HTML

<div id="origin">
    <div id="draggable" class="ui-widget-content">
        <p>I revert when I'm not dropped</p>
    </div>
</div>
<div id="droppable" class="ui-widget-header">
    <p>Drop me here</p>
</div>

JavaScript

$(function() {
    $("#draggable").draggable({ 
        revert:  function(dropped) {
           var dropped = dropped && dropped[0].id == "droppable";
           if(!dropped) alert("I'm reverting!");
           return !dropped;
        } 
    }).each(function() {
        var top = $(this).position().top;
        var left = $(this).position().left;
        $(this).data('orgTop', top);
        $(this).data('orgLeft', left);
    });

    $("#droppable").droppable({
        activeClass: 'ui-state-hover',
        hoverClass: 'ui-state-active',
        drop: function(event, ui) {
            $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
        },
        out: function(event, ui) {
                // doesn't work but something like this
                ui.draggable.mouseup(function () {
                var top = ui.draggable.data('orgTop');
                var left = ui.draggable.data('orgLeft');
                ui.position = { top: top, left: left };
            });
        }
    });
});

解决方案

• TESTED with jquery 1.11.3 & jquery-ui 1.11.4

• DEMO: http://so.lucafilosofi.com/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of-d/

$(function() {
    $("#draggable").draggable({
        revert : function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("uiDraggable").originalPosition = {
                top : 0,
                left : 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
        }
    });
    $("#droppable").droppable();
});

这篇关于在发生 droppable 事件时将 jQuery 可拖动对象恢复到其原始容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！