我有3个Div,我可以拖动到垃圾桶的图像.一旦用户释放鼠标,Div就会被删除,否则它会被恢复到原来的位置,这是我的代码：
<div id="draggables">
<div id="d1">
<header>A</header>
</div>
<div id="d2">
<header>B</header>
</div>
<div id="d3">
<header>C</header>
</div>
</div>
<img src="trash.jpg" id="trash" class="semitransparent" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script>
$(function(){
// draggables...
$("#d1,#d2,#d3").draggable({
revert:"invalid"
});
$("#trash").droppable({
activeClass:"opaque",drop: function(event,ui){
ui.draggable.fadeOut(function(){
ui.draggable.remove();
});
}
});
});
我还将activeClass应用于垃圾桶的图像,以便用户意识到他们可以拖动/功能是活动的.但是我想扩展我的代码,所以当Div被删除时,它会恢复到“draggables”Div中的原始位置.我不确定是否在可拖动元素上或函数内使用辅助克隆以某种方式附加到“draggables”Div.有人有建议吗？是否有类似的方法：ui.draggable.restore();我可以用？
如果我的措辞不好请告诉我,我会重新解决这个问题.
解决方法
我认为你正在寻找恢复选项：
http://jqueryui.com/demos/draggable/#option-revert
http://jqueryui.com/demos/draggable/#option-revert
