jQuery.draggable() - Klicken Sie auf Schaltfläche klicken

Question

Ich habe mehrere draggable & droppable Elemente auf meiner Seite, die accept Eigenschaften haben.

Derzeit mein Code eingerichtet ist wie:

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

Deshalb, wenn die Antwort nicht korrekt ist, seine in seine ursprüngliche Position zurückgekehrt.

Der Benutzer muss auch alle auf der Seite zurücksetzen können. Ich habe folgendes versucht, aber es funktioniert nicht:

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

Answer 1

Da es keine integrierte Methode ist zu tun, was Sie brauchen, dann würden Sie das revert Verhalten selbst simulieren müssen. Sie können die ursprüngliche Position jedes ziehbaren Elements speichern und dann, wenn Sie auf eine Schaltfläche zum Zurücksetzen klicken, diese an diese Positionen zurück animieren.

Hier ist eine vereinfachte 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>​