jQuery,保存多个可拖动对象的原始位置以将其还原

时间:2012-02-01 09:16:50

标签: jquery jquery-ui jquery-plugins jquery-ui-draggable jquery-ui-droppable

Please see the jsfiddle

一旦我将'draggable'对象放在目标上,下一次使用该特定位置时,还原时。有什么方法可以保存可拖动物体的原始位置并始终将它们还原到它们(最初的位置)?或者除了“拯救他们”以达到同样的目标之外还有其他解决方案吗?

我发现有点类似question,但位置(左,上)是硬编码的,以便还原。我努力了,但找不到解决办法。

谢谢。

2 个答案:

答案 0 :(得分:3)

我假设当你将可拖动物放在目标上时,你不希望它恢复,但是当你将它移回目标后,你希望它恢复到原来的位置其余的可拖动者?

如果是这种情况,this answer中的代码就是您要查找的内容,虽然顶部和左侧位置的值0, 0似乎是硬编码的,但它们是必需的,因为它们是可拖动的'position CSS属性在变为可拖动后设置为relative,因此将其设置回0, 0 移回原位置

以下是jsfiddle example,以及示例中修改过的代码:

$('#target').droppable({

    // you need to set revert to a function as the 'out' event is turning it
    // into a function...
    drop: function(event, ui){
        ui.draggable.draggable('option', 'revert', function(){return false});
    },

    out: function(event, ui){
        ui.draggable.draggable('option', 'revert', function(){
            $(this).data('draggable').originalPosition = {
                top: 0,
                left: 0
            };
            return true;
        });
    }
});

希望这有帮助!如果我完全错过了商标,请告诉我!

答案 1 :(得分:0)

Chris Kempen的回答是正确的,但在较新版本的jQuery中你可能想要使用

$(this).data('ui-draggable')

在“out”-callback中,因为数据属性已重命名。