我有一些可拖动的 & 可丢弃的我的页面上的元素,其中有accept
特性。
目前我的代码设置如下:
$(".answer." + answer).draggable({
revert: "invalid"
, snap: ".graph"
});
$(".graph." + graph).droppable({
accept: ".answer." + answer
});
因此,如果答案不正确,它就会恢复到原来的位置。
用户还需要能够重置页面上的所有内容。我已尝试以下方法,但它不起作用:
$("btnReset").click(function(){
$(".graph.A").draggable({revert:true});
});
由于没有内置方法可以完成您需要的操作,因此您必须自己模拟恢复行为。您可以存储每个可拖动元素的原始位置,然后在单击重置按钮时将它们动画回到这些位置。
这是一个简化的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:
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)