我正在开发一个可视化编辑器，该编辑器需要用户可以随意添加、删除和拖动元素。每个元素都是一个div，使用 jQueryUI 可拖动。新元素将附加到代表工作空间的父 div。每个元素内部都有一个按钮来删除它。这一切都很好。
我遇到的问题是，当我删除一个不是最近创建的元素时，所有其他可拖动元素都会改变位置。这似乎是由使用relative 定位的可拖动元素引起的。
目前，我的删除函数只是调用$('#item-x').remove()。还有其他方法可以删除可拖动元素吗？
【问题讨论】：
尝试改用.draggable("destroy")。我用过就好了。
您可以在jqueryUI Draggable destroy查看此方法和所有其他方法、选项和事件
更新
抱歉，我认为您的问题是其他问题。你需要做的是改变你的方法，因为从 dom 中删除元素实际上与 draggable 的元素无关。您需要用一个元素封装您的可拖动对象，例如与您的可拖动对象具有相同高度和宽度的 div，然后随意销毁可拖动对象。
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的例子
【讨论】：
原来这个问题与this one 重复，但我搜索的内容有误。
解决方案是根据另一个问题简单地将元素更改为具有绝对定位。然而，我发现我的元素总是会恢复到相对定位，即使我在他们的 CSS 中指定它们应该是绝对的，所以现在我这样做了：
$('#item-x').draggable().css("position", "absolute");
【讨论】：
draggable 之前将它们添加到 DOM 就足够了。
由于某些原因破坏功能不起作用。如果你想从元素中完全删除拖动属性，试试这个
var temp = $("#dragItem").draggable().remove();
这通过删除可拖动属性返回元素。捕获临时变量并将其分配回父元素
$(temp).appendTo("#parentContainer")
让我知道这是否有效。
【讨论】：