通过单击按钮将 jquery 可拖动对象重置为原始位置

Question

我想通过单击按钮将一些可拖动对象重置为其原始位置。 我可以移动并找到当前位置。但是如何通过单击“重置”按钮来重置它们？这一切都在一个容器内。 谁能帮帮我？

查看FIDDLE

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

假设您要追溯这些步骤。

我将位置压入堆栈并在单击重置按钮时弹出并检索先前的位置。

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

查看fiddle

----- 编辑---- 修复坐标问题

New fiddle

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