jQueryUI：正確刪除可拖動元素

我正在研究一種可視化編輯器，該編輯器需要用戶可以隨意添加，移除和拖動的元素。每個元素都是使用jQueryUI拖動的div。新元素附加到代表工作空間的父代div。每個元素都有一個內部按鈕來刪除它。這一切都很好。jQueryUI：正確刪除可拖動元素

我遇到的問題是，當我刪除不是最近創建的元素時，所有其他可拖動元素都會改變位置。這似乎是由使用relative定位的可拖動元素引起的。

目前，我的移除功能只需撥打$('#item-x').remove()即可。還有另外一種方法可以刪除可拖動的元素嗎？

來源

2012-07-12 Daniel Buckmaster

原來這個問題1上是this one的副本，但我正在尋找錯誤的東西。

解決方法是根據其他問題簡單地將元素更改爲具有絕對定位。我找到了，但是，我的元素總是會恢復到，甚至當我在他們的CSS，他們應該是絕對的規定相對定位，所以現在我做：

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

來源

2012-07-13 14:15:01

按照這個答案：http://stackoverflow.com/a/22432224/471441，只要確保在調用'draggable'之前將它們添加到DOM就足夠了。 – jonny 2014-11-24 20:59:24

嘗試使用.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-12 13:19:06

對我而言，「deatroy」最終會產生與「禁用」相同的效果 - 即該元素停止拖動，但保持在相同的位置。在創建元素時，我可能會做錯嗎？ – 2012-07-13 08:48:04

@DanielBuckmaster看到我的更新，並告訴我它是否幫助你。 – 2012-07-13 12:59:53

公平的解決方案，但是因爲我正在編寫一個編輯器，所以我最終得到了大量的空容器，人們添加了節點，然後將其刪除。 – 2012-07-13 14:11:18

對於一些原因破壞功能無法正常工作。如果要完全刪除元素的拖動屬性，請嘗試此操作

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

此操作通過刪除draggable屬性來返回元素。捕獲臨時變量並將其分配回父元素

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

讓我知道這是否有效。

來源

2016-02-03 23:11:38 kishorekumaru

jQueryUI：正確刪除可拖動元素

回答

相關問題