我有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();我这样的方法？
如果我的措辞不好请告诉我,我会重新解决这个问题.