7

我正在开发一个可视化编辑器，该编辑器需要用户可以随意添加、删除和拖动元素。每个元素都可以div使用 jQueryUI 进行拖动。新元素被附加到div代表工作空间的父元素。每个元素内部都有一个按钮来删除它。这一切都很好。

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

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

4

3 回答 3

8

尝试.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示例

于 2012-07-12T13:19:06.287 回答
3

原来这个问题是这个问题的副本，但我正在寻找错误的东西。

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

$('#item-x').draggable().css("position", "absolute");
于 2012-07-13T14:15:01.883 回答
1

由于某些原因破坏功能不起作用。如果你想从元素中完全删除拖动属性，试试这个

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

这通过删除可拖动属性返回元素。捕获临时变量并将其分配回父元素

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

让我知道这个是否奏效。

于 2016-02-03T23:11:38.543 回答