单击按钮将jquery拖放对象重置为原始位置。

Question

我想通过单击一个按钮将一些可拖动的对象重置到它原来的位置。我可以移动并找到目前的位置。但是如何通过点击“重置”按钮来重置它们呢？都在一个容器里。有谁可以帮我？

检查这个小提琴

var coordinates = function(element) {
    element = $(element);
    var top = element.position().top;
    var left = element.position().left;
    $('#results').text('X: ' + left + ' ' + '   Y: ' + top);
}


$('#custombox').draggable({ containment: "#containment-wrapper", scroll: false,
            start: function() { 
                coordinates('#custombox');
                        },
         stop: function() {
                coordinates('#custombox');
                    }

        });

$('#logo').draggable({ containment: "#containment-wrapper", scroll: false,
            start: function() { 
                coordinates('#logo');
                        },
         stop: function() {
                coordinates('#logo');
                    }

        });
 $("#logo").resizable({ containment: "#containment-wrapper", scroll: false,maxHeight: 250, maxWidth: 350, minHeight: 50, minWidth: 50 });

Answer 1

假设你想要追溯这些步骤。

我将这些位置推到堆栈上并弹出，并在“重置buton”按钮上检索前面的位置。

$("#previousPos").on('click', function(){
    var pos = posStack.pop();
    $('#logo').css("left", pos.x);
    $('#logo').css("top", pos.y);
});

检查小提琴

-编辑-修正坐标问题

新小提琴

Answer 2

对于我的项目，我有9个元素需要返回到他们原来的位置。我发现我不需要跟踪他们原来的位置就可以重新设置他们。我只需将CSS顶部和左边的样式重置为空白值，它们就会重置到原来的位置。

function endRound() {
    $(".ball").css({"top":"", "left":""});
}

Answer 3

可拖的物品不跟踪他们的原始位置，我知道，只有在拖和被抓拍回来。你可以自己这样做：

例：

 $("#draggable").data({
    'originalLeft': $("#draggable").css('left'),
    'origionalTop': $("#draggable").css('top')
});

$(".reset").click(function() {
    $("#draggable").css({
        'left': $("#draggable").data('originalLeft'),
        'top': $("#draggable").data('origionalTop')
    });
});