jQuery的UI可拖动复位到原来的位置(JQuery-UI draggable reset to

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

我刚刚建立了一个简单的测试与#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:

可拖动的项目不跟踪他们，我知道原来的位置; 仅在阻力和被反驳道。 你可以做这你自己，虽然：

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

我用这一个项目

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

的伎俩，我

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

文章来源: JQuery-UI draggable reset to original position