jQueryUI：正确删除可拖动元素

Question

我正在开发一个可视化编辑器，需要用户添加、删除和拖动元素。每个元素都是用jQueryUI制作的可拖动的

。新元素将附加到表示工作区的父

中。每个元素内部都有一个按钮，用于删除它。这一切都很好地运作。

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

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

- Daniel Buckmaster

Answer 1

尝试使用.draggable("destroy")。我已经成功使用过了。

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

更新

抱歉，我以为您的问题是其他什么。您需要改变方法，因为从dom中移除元素实际上与元素是否可拖动没有任何关系。您需要将可拖动元素封装在一个元素中，例如一个具有相同高度和宽度的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的示例：

- KoU_warch

---

对我来说，“销毁”最终具有与“禁用”相同的效果 - 即元素停止可拖动，但保持在原位置。当我“创建”元素时，是否有做错什么？ - Daniel Buckmaster

@DanielBuckmaster，请查看我的更新并告诉我是否对您有所帮助。 - KoU_warch

解决方案还算不错，但由于我正在编写一个编辑器，最终会有很多空容器，因为人们添加了节点然后又将其删除。 - Daniel Buckmaster

Answer 2

原来这个问题是一个重复的问题， 这个链接 中有解决方法，但我一直在寻找错误的内容。

解决方案很简单，只需要将元素更改为绝对定位，就像其他问题中所述。然而，我发现即使在CSS中指定了它们应该是绝对位置，我的元素仍然会恢复到相对位置，所以现在我使用以下代码：

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

- Daniel Buckmaster

---

根据这个答案：https://dev59.com/92w05IYBdhLWcg3w_Guw#22432224，只需确保在调用“draggable”之前将它们添加到DOM即可。 - jonny

Answer 3

由于某些原因，销毁函数无法正常工作。如果您想完全从元素中删除拖动属性，请尝试以下方法。

var temp = $("#dragItem").draggable().remove();

通过移除可拖动属性，可以返回该元素。将其捕获到一个临时变量中，并将其重新分配给父元素。

$(temp).appendTo("#parentContainer")

让我知道这是否有效。

- kishorekumaru