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

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

3 个答案: