jQuery，保存多个可拖动对象的原始位置以将它们恢复回来

发布于 2024-12-31 22:14:11 字数 407 浏览 0 评论 0原文

请参阅 jsfiddle

一旦我将“可拖动”对象放在目标上，就会使用该特定位置下次回来的时候。有什么方法可以保存可拖动对象的原始位置并始终将它们恢复到原来的位置（第一个位置）？或者除了“拯救他们”之外还有其他解决方案来达到同样的目的吗？

我发现有些类似问题，但位置（左、上）被硬编码在其中以恢复。我努力尝试但找不到解决方案。

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

骄兵必败 2025-01-07 22:14:11

我假设当您将可拖动对象放在目标上时，您不希望它恢复，但是在将其移回目标之外后，您希望它与其余部分一起恢复到其原始位置可拖动对象？

如果是这种情况，此答案中的代码就是您要查找的内容，尽管值 0 , 0 表示顶部和左侧位置似乎是硬编码的，它们是必要的，因为可拖动对象的 position CSS 属性在它们被设置后被设置为 relative变成Draggables，因此将它们设置回 0, 0 会将它们移回原来的位置。

这是一个 jsfiddle 示例，以及示例中修改后的代码：

$('#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;
        });
    }
});

希望这有帮助！如果我完全没有达到目标，请告诉我！

I'm assuming that when you drop your draggable on the target, you don't want it to revert, but after you move it back out of the target, you'd like it to revert back to its original position with the rest of the draggables?

If that's the case, the code in this answer is what you're looking for, and although the values 0, 0 for the top and left locations seem hard-coded, they are necessary as the draggables' position CSS attributes get set to relative after they've been turned into draggables, so setting them back to 0, 0 would move them back to their original positions.

Here's a jsfiddle example, and also the modified code in your 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;
        });
    }
});

Hope this helps! Please let me know if I've missed the mark completely!

回复收藏 0 原文