JQuery-UI ziehbares Zurücksetzen auf Originalposition?

Question

Das ist wahrscheinlich sehr einfach, aber ich denke immer zu kompliziert.

Ich habe gerade einen einfachen Test mit #draggable/#droppable mit einer festen Breite/Höhe + schweben ein: links.

Ich mag dann eine Reset-Taste der Lage sein, die #draggable zurückgesetzt, um es ursprünglicher Zustand ist, nachdem sie einen #droppable geschnappt worden sind. (unterste Zeile)

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

Schleppbare Elemente verfolgen nicht ihre ursprüngliche Position, von der ich weiß; nur während des Ziehens und um zurückgeschnappt zu werden. Sie können dies nur tun, auf eigene Faust, aber:

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

ich verwendet, um dieses an einem Projekt

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

den Trick für mich getan hat

Answer 3

Ich habe gerade hatte großer Erfolg mit dem folgenden:

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

Answer 4

Ich benutzte die Grundidee von h0dges. Die Bälle, die ich kreierte, kehrten zu ihren ursprünglichen Positionen zurück, aber ich verlor die Stile, aus denen sie zu Bällen wurden. Daher behielt ich die Stile der Kugeln und nur ihre oberen und linken Stile, um sie in ihre ursprünglichen Positionen zurück:

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