jQuery.draggable()-单击按钮时恢复 [英] jQuery.draggable() - Revert on button click
问题描述
我有几个可拖动&我页面上的可投放元素,具有accept
属性.
I have several draggable & droppable elements on my page, which have accept
properties.
目前,我的代码设置如下:
Currently my code is set up like:
$(".answer." + answer).draggable({
revert: "invalid"
, snap: ".graph"
});
$(".graph." + graph).droppable({
accept: ".answer." + answer
});
因此,如果答案不正确,它将恢复为原始位置.
Therefore if the answer isn't correct, its reverted to its original position.
用户还需要能够重置页面上的所有内容.我已经尝试了以下方法,但是不起作用:
The user also needs the ability to reset all on the page. I've tried the following, but it doesn't work:
$("btnReset").click(function(){
$(".graph.A").draggable({revert:true});
});
推荐答案
由于没有内置方法可以执行所需的操作,因此您必须自己模拟还原行为.您可以存储每个可拖动元素的原始位置,然后在单击重置按钮时将其重新设置为这些位置的动画.
Since there's no built-in method to do what you need, you'd have to simulate the revert behavior yourself. You can store the original position of each draggable element and then when clicking a reset button, animate them back to those positions.
这是一个简化的 jsFiddle示例 .
Here's a simplified 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>
这篇关于jQuery.draggable()-单击按钮时恢复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!