jQuery.draggable（） – 恢复按钮单击

我的页面上有几个可拖动和可放置的元素，它们具有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示例 。

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：

 
 
I revert when I'm dropped
 
 
 
I revert when I'm dropped
 
 Reset 
 
Drop me here
 
​