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":""});
}