jQuery.draggable() - Отменить при нажатии кнопки

Question

У меня есть несколько draggable & droppable элементов на моей странице, которые имеют accept объектов.

В настоящее время мой код настроен как:

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

Поэтому, если ответ не является правильным, его вернулось в исходное положение.

Пользователю также требуется возможность сброса всех параметров на странице. Я попытался следующие, но это не работает:

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

Answer 1

Поскольку нет встроенного метода делать то, что вам нужно, вы должны имитировать поведение REVERT себя. Вы можете сохранить исходное положение каждого перетаскиваемого элемента, а затем, щелкнув кнопку сброса, оживите их обратно в эти позиции.

Упрощенный 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>​