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

由於沒有內置的方法來執行您所需的操作，您必須自己模擬回覆行爲。您可以存儲每個可拖動元素的原始位置，然後在單擊重置按鈕時將其設置回這些位置。

這是簡化的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>​