jQuery UI可拖动重置到原始位置 [英] JQuery-UI draggable reset to original position

问题描述

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

This is probably very easy to do, but I always think too complicated.

我刚刚使用#draggable / #droppable和固定宽度/高度+浮点数：左。

I've just set up a simple test with #draggable / #droppable with a fixed width/height + float:left.

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

I then want a reset button to be able to reset the #draggable to it's original state after it's been snapped to a #droppable. (bottom line)

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

推荐答案

可拖动项无法跟踪其原始位置我所知道的；仅在拖动过程中才能被拉回。不过，您可以自己完成此操作：

Draggable items don't keep track of their original position that I know of; only during drag and to be snapped back. You can just do this on your own, though:

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

这篇关于jQuery UI可拖动重置到原始位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！