7

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

私が抱えている問題は、最近作成されていない要素を削除すると、他のすべてのドラッグ可能な要素の位置が変わることです。relativeこれは、ポジショニングを使用してドラッグ可能な要素が原因のようです。

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

4

3 に答える 3

8

.draggable("destroy")代わりに使用してみてください。私はそれをうまく使用しました。

このメソッドと他のすべてのメソッド、オプション、イベントはjqueryUIDraggabledestroyで表示できます

アップデート

申し訳ありませんが、あなたの問題は別のものだと思いました。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 に答える