14

这可能很容易做到，但我总觉得太复杂了。

我刚刚使用#draggable / #droppable 设置了一个简单的测试，具有固定的宽度/高度+浮动：左。

然后，我希望重置按钮能够在 #draggable 被捕捉到 #droppable 后将其重置为其原始状态。（底线）

$(document).ready(function() {

    $("#draggable").draggable
    ({  
        revert: 'invalid',
        snap: '#droppable',
        snapMode: 'corner',
        snapTolerance: '22'

    });
});

    $("#droppable").droppable
    ({
        accept: '#draggable', 
        drop: function(event, ui) 
        {
            $(this).find("#draggable").html();
        }
});

    $(".reset").click(function() {
    /* What do I put here to reset the #draggable to it's original position before the snap */
});
4

6 回答 6

20

我在一个项目中使用了这个

$("#reset").click(function () {
    $(".draggable-item").animate({
        top: "0px",
        left: "0px"
    });
});

为我做了伎俩

于 2014-02-16T13:49:40.143 回答
12

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

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

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

http://jsfiddle.net/ExplosionPIlls/wSLJC/

于 2013-03-04T02:38:08.000 回答
6

我刚刚在以下方面取得了巨大成功：

$(".draggable-item").removeAttr("style");
于 2016-11-15T15:19:34.513 回答
2

我使用了 h0dges 的基本思想。我创造的球回到了原来的位置，但我失去了把它们变成球的样式。因此，我保留了球的样式，只是重置了它们的顶部和左侧样式以将它们恢复到原来的位置：

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

我发现以下是重置到原始位置的最简单方法，但是如果您希望项目保持拖动，这将无法单独工作

$(".draggable-item").removeAttr('style');

这对我有用，可以重置到原始位置并保持项目可拖动：

$("#reset").click(function () {
    // Reset position
    $(".draggable-item").removeAttr('style');

    // Destroy original draggable and create new one
    $(".draggable-item").draggable("destroy");
    $(".draggable-item").draggable();
});
于 2018-06-15T22:34:42.480 回答
0

我不确切知道人们希望看到什么，但我对通过单击垂直或水平将对象重置为初始位置做了一些改动。Fiddle https://jsfiddle.net/JunaidAli/wp1n796q/321/

于 2020-07-15T23:09:53.210 回答