jQueryUI:正确删除可拖动元素

Question

我正在开发一个可视化编辑器,它需要用户可以随意添加,删除和拖动的元素.每个元素都是div用jQueryUI创建的.新元素将附加到div表示工作空间的父级.每个元素本身都有一个按钮可以将其删除.一切都很好.

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

目前,我的删除功能只是调用$('#item-x').remove().还有另一种方法我应该删除可拖动的元素吗？

Answer 1

请尝试使用.draggable("destroy").我用它很好.

您可以在jqueryUI Draggable destroy中查看此方法和所有其他方法,选项和事件

更新

对不起,我认为你的问题是别的.你需要做的是改变你的方法,因为从dom中删除元素实际上与元素无关draggable.你需要使用一个元素封装你的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的例子

Answer 2

事实证明这个问题与这个问题重复，但我正在寻找错误的东西。

解决方案是简单地将元素更改为具有绝对定位，如另一个问题所示。然而，我发现我的元素总是会恢复为相对定位，即使我在 CSS 中指定它们应该是绝对的，所以现在我这样做：

$('#item-x').draggable().css("position", "absolute");