jQuery.draggable() - Przywróć przy kliknięciu przycisku

Question

Mam kilka elementów na mojej stronie, które mają właściwości accept.

Obecnie mój kod jest skonfigurowany tak:

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

Dlatego jeśli odpowiedź nie jest prawidłowa, jego powrócił do swojej pierwotnej pozycji.

Użytkownik musi również mieć możliwość zresetowania wszystkich na stronie. Próbowałem następujące, ale to nie działa:

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

Answer 1

Ponieważ nie ma wbudowanej metody, aby zrobić to, czego potrzebujesz, trzeba samemu zasymulować zachowanie odwrotne. Możesz zachować oryginalną pozycję każdego przeciągalnego elementu, a następnie, po kliknięciu przycisku resetuj, animuj je z powrotem do tych pozycji.

Oto uproszczony 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>​