jQueryUI：正确删除可拖动元素

我正在开发一个可视化编辑器，它需要用户可以根据需要添加、删除和拖动元素。每个元素都是一个div使用 jQueryUI 实现可拖动。新元素被附加到父元素上div代表工作空间。每个元素内部都有一个用于将其删除的按钮。这一切都很好。

我遇到的问题是，当我删除不是最近创建的元素时，所有其他可拖动元素都会更改位置。这似乎是由使用可拖动元素引起的relative定位。

目前，我的删除函数只需调用$('#item-x').remove()。还有另一种方法可以删除可拖动元素吗？

尝试使用.draggable("destroy")反而。我用过挺好的。

您可以在以下位置查看此方法以及所有其他方法、选项和事件：jqueryUI 可拖动销毁 http://jqueryui.com/demos/draggable/#method-destroy

Update

抱歉，我以为你的问题是别的问题。你需要做的是改变你的方法，因为从 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;
}

​ ​A jsfiddle http://jsfiddle.net/tHZTM/6/ example