jQueryUI：ドラッグ可能な要素を適切に削除する

Question

私は、ユーザが好きなように追加、削除、ドラッグすることができる要素を必要とするビジュアルエディタに取り組んでいます。各要素はdivで、jQueryUIでドラッグ可能になっています。新しい要素は、ワークスペースを表す親のdivに追加されます。各要素には、それを削除するためのボタンがあります。これはすべて素晴らしいです。

私が抱えている問題は、最近作成されたものではない要素を削除すると、他のすべてのドラッグ可能な要素が位置を変更するということです。これは、relative配置を使用しているドラッグ可能な要素によって発生しているようです。

現時点では、私の取り外し機能は単に$('#item-x').remove()を呼び出します。ドラッグ可能な要素を削除する別の方法がありますか？

Answer 1

このquestiが判明onはthis oneの複製ですが、私は間違ったことを探していました。

解決策は、他の質問のように要素を絶対的な位置付けに変更することです。私は今、私は、私は彼らが絶対的であることを彼らのCSSで指定された場合でも、私の要素は常に相対的な位置に戻すだろうと、しかし、見つかった：いくつかの理由から

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

Answer 2

代わりに.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例

Answer 3

機能が動作しない破壊します。あなたが完全に削除したい場合は要素からドラッグプロパティは、これは

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

これは、ドラッグ可能なプロパティを削除することで要素を返してみてください。一時変数に取り込んで親要素に戻します。

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

これが機能するかどうかを教えてください。