jquery-ui - example - jquery ui position

JQuery-UI reinicio arrastrable a la posición original.?

Question

Esto es probablemente muy fácil de hacer, pero siempre pienso que es demasiado complicado.

Acabo de configurar una prueba simple con #draggable / #droppable con un ancho / altura fijo + flotante: izquierda.

Luego quiero un botón de reinicio para poder restablecer el #draggable a su estado original después de haber sido ajustado a un #doldeable. (línea de fondo)

$(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

Acabo de tener un gran éxito con lo siguiente:

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

Answer 2

Lo usé en un proyecto

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

hizo el truco para mí

Answer 3

Los elementos arrastrables no hacen un seguimiento de su posición original que yo sepa; solo durante la operación de arrastrar y para volver atrás. Sin embargo, puedes hacer esto solo:

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

Usé la idea básica de h0dges. Las bolas que creé volvieron a sus posiciones originales, pero perdí los estilos que las convertían en bolas. Por lo tanto, mantuve los estilos de las bolas y simplemente reinicié sus estilos superior e izquierdo para devolverlos a sus posiciones originales:

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