3

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

检查这个小提琴

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

3 回答 3

3

假设您要追溯这些步骤。

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

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

检查小提琴

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

新小提琴

于 2013-11-14T09:02:27.520 回答
1

对于我的项目，我有 9 个元素需要回到原来的位置。我发现我不必为了重置它们而跟踪它们的原始位置。我只是将 CSS 顶部和左侧样式重置为空白值，然后将它们重置为原始位置。

function endRound() {
    $(".ball").css({"top":"", "left":""});
}
于 2016-11-18T12:55:04.120 回答
-1

可拖动项目不会跟踪我所知道的原始位置；仅在拖动过程中并被弹回。您可以像这样自己执行此操作：

前任：

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

$(".reset").click(function() {
    $("#draggable").css({
        'left': $("#draggable").data('originalLeft'),
        'top': $("#draggable").data('origionalTop')
    });
});
于 2013-11-14T07:14:22.067 回答