jQuery.draggable() - Ripristina pulsante clic

Question

Ho diversi draggable & droppable elementi sulla mia pagina, che hanno proprietà accept.

Attualmente il mio codice è impostato come:

$(".answer." + answer).draggable({ 
    revert: "invalid" 
    , snap: ".graph" 
}); 
$(".graph." + graph).droppable({ 
    accept: ".answer." + answer 
}); 

Pertanto se la risposta non è corretta, la sua è ritornato nella sua posizione originale.

L'utente ha anche la possibilità di ripristinare tutto sulla pagina. Ho provato quanto segue, ma non funziona:

$("btnReset").click(function(){ 
    $(".graph.A").draggable({revert:true}); 
}); 

Answer 1

In mancanza di un metodo incorporato per fare ciò che è necessario, che avrebbe dovuto simulare il comportamento Ripristina da soli. È possibile memorizzare la posizione originale di ciascun elemento trascinabile e quindi quando si fa clic su un pulsante di ripristino, animarli nuovamente in tali posizioni.

Ecco un numero semplificato jsFiddle example.

jQuery:

$("#draggable").draggable({ 
    revert: "invalid" 
}); 
$("#draggable2").draggable({ 
    revert: "invalid" 
}); 
$("#droppable").droppable({ 
}); 
$("#btnReset").click(function() { 
    $("#draggable, #draggable2").animate({ 
     "left": $("#draggable").data("left"), 
     "top": $("#draggable").data("top") 
    }); 
}); 
$(".ui-widget-content").data("left", $(".ui-widget-content").position().left).data("top", $(".ui-widget-content").position().top); 

HTML:

<div id="draggable" class="ui-widget-content"> 
    <p>I revert when I'm dropped</p> 
</div> 
<div id="draggable2" class="ui-widget-content"> 
    <p>I revert when I'm dropped</p> 
</div> 
<button id="btnReset">Reset</button> 
<div id="droppable" class="ui-widget-header"> 
    <p>Drop me here</p> 
</div>​