我正在开发一个可视化编辑器,它需要用户可以随意添加,删除和拖动的元素.每个元素都是一个使用jQueryUI可拖动的div.新元素将附加到表示工作空间的父div.每个元素本身都有一个按钮来移除它.一切都很好.
我遇到的问题是当我删除一个不是最近创建的元素时,所有其他可拖动元素都会改变位置.这似乎是由使用相对定位的可拖动元素引起的.
目前,我的删除功能只需调用$(‘#item-x’).remove().还有另一种方法我应该删除可拖动的元素吗？
解决方法
尝试使用.draggable(“destroy”)代替.我用得很好.
您可以在jqueryUI Draggable destroy查看此方法以及所有其他方法,选项和事件
更新
对不起我认为你的问题不是别的.你需要做的是改变你的方法,因为从dom中删除元素实际上与可拖动的元素无关.你需要使用一个元素来封装你的draggable,例如一个与你的draggable相同的高度和宽度的div,然后根据你的需要摧毁draggable.
HTML：
<div id="conteiner"> <div class="dragConteiner"><div id="draggable1" class="draggable"></div></div> <div class="dragConteiner"><div id="draggable2" class="draggable"></div></div> <div class="dragConteiner"><div id="draggable3" class="draggable"></div></div> </div>
jQuery的：
$(function(){
$("#draggable1").draggable();
$("#draggable2").draggable();
$("#draggable3").draggable();
$("#draggable2").on('mouseup',function(){
alert('bye draggable!');
$(this).draggable('destroy');
//in case you like to use if after
//$(this).hide();
//as in your code
$(this).remove();
})
})
CSS：
.draggable{
height:50px;
width:50px;
background: green;
}
.dragConteiner{
height:50px;
width:50px;
margin-top:5px;
}
#conteiner{
margin-top:25px;
margin-left:25px;
}
一个jsfiddle的例子