jQueryを使用してアイテムのドラッグアンドドロップでDOMを更新

Question

私は2つの列を持つテーブルを持っています。各列には、一意のID「pick」と「drop」があります。また、私は最初の列にいくつかの項目があります。 draggable/drappable jQuery UIの使い方最初の列（ピック）から2番目の列（ドロップ）に項目をドラッグします。

アイテムを移動するときにDOMを更新する必要があります。「選択」からアイテムを削除して「ドロップ」に追加します。私はそれをすべて関数に入れるのに助けが必要です。この関数は、ドロップを検出できるコードの一部に含まれます。

Answer 1

ここで私はこれを行いました。ドロップされた要素の親を、ドロップされた要素に変更します。

$(".droppable").droppable({ 
    drop: function(event, ui) { 
     $(ui.draggable).appendTo($(this)); 
}}); 

、ここで、それは私はあなたがこれを試してみてくださいだと思うあなたの新しい問題に考えた後

$(".droppable").droppable({ 
    drop: function(event, ui) { 
     if($(ui.draggable).parent() !==$(this)){ 
      $(ui.draggable).appendTo($(this)); 
     } 
}}); 

する必要がない場合、それは実行does notのように、私はそれを編集する方法をです。これが機能するために、drop列はtopとposition:absoluteとleftを持っている必要がありますし、両方の列を含むメインラッパーはposition:relative

$(".droppable").droppable({ 
    drop: function(event, ui) { 
     var $kid = $(ui.draggable); 
     var $dad = $(this); 
     if($kid.parent() !== $dad)){ 
      $kid.appendTo($dad); 
      $kid.css('left', $kid.left() - $dad.left()); 
      $kid.css('top', $kid.top() - $dad.top()); 

     } 
}});