在droppable的out事件上将jQuery可拖动对象还原回其原始容器

Question

我有一个可拖动的项目,如果没有丢弃在一个droppable将恢复.这很有效,直到用户在droppable中删除项目.如果他们认为他们在任何时候犯了一个错误他们将拖拽拉出来就会恢复到掉落状态.我希望在out和停用draggable回到原来的容器.

我的代码如下,但我在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 };
            });
        }
    });
});

Answer 1

• 检测过用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-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();
});

Answer 2

我不确定这是否适合您的实际使用,但它适用于您的测试用例 - 更新于http://jsfiddle.net/sTD8y/27/.

我只是这样做,只有在之前没有删除项目时才使用内置恢复.如果已被删除,则手动完成恢复.你可以调整这个动画通过检查实际的CSS属性的一些计算的偏移,但我会让你与玩,因为它的很多依赖于可拖动的CSS和它周围的DOM结构.

$(function() {
    $("#draggable").draggable({
        revert:  function(dropped) {
             var $draggable = $(this),
                 hasBeenDroppedBefore = $draggable.data('hasBeenDropped'),
                 wasJustDropped = dropped && dropped[0].id == "droppable";
             if(wasJustDropped) {
                 // don't revert, it's in the droppable
                 return false;
             } else {
                 if (hasBeenDroppedBefore) {
                     // don't rely on the built in revert, do it yourself
                     $draggable.animate({ top: 0, left: 0 }, 'slow');
                     return false;
                 } else {
                     // just let the built in revert work, although really, you could animate to 0,0 here as well
                     return true;
                 }
             }
        }
    });

    $("#droppable").droppable({
        activeClass: 'ui-state-hover',
        hoverClass: 'ui-state-active',
        drop: function(event, ui) {
            $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
            $(ui.draggable).data('hasBeenDropped', true);
        }
    });
});

Answer 3

如果您想将元素恢复到源位置（如果它没有被放置在#droppable元素内），只需在脚本开头（而不是位置）保存可拖动元素的原始父元素，并且如果您验证它没有被放入#droppable，然后只需将 的父级恢复#draggable到该原始元素。

所以，替换这个：

}).each(function() {
    var top = $(this).position().top;
    var left = $(this).position().left;
    $(this).data('orgTop', top);
    $(this).data('orgLeft', left);
});

有了这个：

}).each(function() {
    $(this).data('originalParent', $(this).parent())
});

在这里，您将拥有可拖动元素的原始父元素。现在，您必须在精确的时刻恢复它的父级。

drop每次元素从 droppable 中拖出时都会调用，而不是在停止处。所以，你添加了很多事件回调。这是错误的，因为您从不清理mouseup事件。一个可以挂钩回调并检查元素是放在元素内部还是外部的好地方#droppableis revert，并且您现在正在执行此操作，因此，只需删除drop回调即可。

当元素被放下，并且需要知道它是否应该被还原时，你肯定知道在新的拖动开始之前你不会有来自用户的任何其他交互。因此，使用您用来知道它是否应该恢复或知道的相同条件，让我们用以下alert代码片段替换它：将父元素恢复到原始 div，并originalPosition从draggable内部重置 div 。该originalPosition广告载体在时间设置好的_mouseStart，所以，如果你改变元素的主人，你应该重新设置，以使复归走的动画到适当的位置。因此，让我们将其设置为{top: 0, left: 0}，使动画转到元素的原点：

revert: function(dropped) {
    var dropped = dropped && dropped[0].id == "droppable";
    if(!dropped) {
        $(this).data("draggable").originalPosition = {top:0, left:0}
        $(this).appendTo($(this).data('originalParent'))
    }
    return !dropped;
}

就是这样！你可以在这里检查这个工作：http : //jsfiddle.net/eUs3e/1/

考虑到，如果在任何 jQuery 的 UI 更新、行为revert或originalPosition更改中，您将需要更新您的代码以使其工作。请记住这一点。

如果您需要一个不使用对 ui.draggable 内部调用的解决方案，您可以body使用greedy定义为 的选项制作可放置元素false。您必须确保您的body元素全屏显示。

祝你好运！