Question

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

我刚用#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 */
});

Answer 1

我在项目中使用了这个

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

为我做了伎俩

Answer 2

可拖动物品无法跟踪我所知道的原始位置;只有在拖动过程中才会被折回。你可以自己做，但是：

$("#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/

Answer 3

我刚刚取得了以下成就：

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

Answer 4

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

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

Answer 5

我发现以下是重置到原始位置的最简单方法，但如果您希望项目保持换档，则无法单独使用

$(".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();
});

Answer 6

我不完全知道人们希望看到什么，但是我只是通过单击垂直或水平单击就将对象重置为初始位置。Fiddle https://jsfiddle.net/JunaidAli/wp1n796q/321/

JQuery-UI可拖动重置到原始位置

6 个答案: