jQuery.draggable() - Hoàn nguyên khi nhấp vào nút

Question

Tôi có một số thành phần draggable & droppable trên trang của tôi, có accept thuộc tính.

Hiện nay mã của tôi được thiết lập như:

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

Do đó, nếu câu trả lời là không đúng, quay trở của nó đến vị trí ban đầu của nó.

Người dùng cũng cần có khả năng đặt lại tất cả trên trang. Tôi đã thử những điều sau đây, nhưng nó không hoạt động:

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

Answer 1

Kể từ khi không có built-in phương pháp để làm những gì bạn cần, bạn phải mô phỏng các hành vi Revert mình. Bạn có thể lưu trữ vị trí ban đầu của mỗi phần tử có thể kéo và sau đó khi nhấp vào nút đặt lại, hãy động chúng trở lại các vị trí đó.

Dưới đây là đơn giản 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>​