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

Question

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

我刚用#draggable /#droppable建立了一个简单的测试,其宽度/高度固定+ float:left.

然后,我想要一个重置按钮,以便在#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");