jQuery draggable + droppable - 物理的にドラッグされたアイテムをドロップされたコンテナに移動する

Question

ドラッグ可能に設定されている要素を取って、現在の機能のようにオーバーレイするのではなく、その要素をコンテナに物理的に移動する必要があります。例えばので

：だから

<div class="container"></div> 
<div class="image"> 
    <img class="thumb" src="images/Koala.jpg" alt="" /> 
</div> 

$(function() { 
    $(".image").draggable(); 
    $(".container").droppable({ 
     drop: function (event, ui) { 
      alert('dropped!'); 
     } 
    }); 
}); 

画像をドラッグして、私はそこに移動する実際のHTML要素を必要とする「コンテナ」のdiv内に落下された後。イベントが発生した後、私はChromeの開発ツールを使用して、ソースを見ていた場合

だから、私が見るであろう：

<div class="container"> 
    <div class="image"> 
     <img class="thumb" src="images/Koala.jpg" alt="" /> 
    </div> 
</div> 

これは可能ですか？

おかげドロップ機能で

Answer 1

これはにドラッグされた要素を移動する必要がありますドームツリーの中に落ちる。

drop: function (event, ui) { 
    $(this).append(ui.draggable); 
} 

Answer 2

、$(this)をドラッグを受け入れるドロップ可能で、これだけドロップ可能にドラッグを追加するために.append()を使用します。http://jsfiddle.net/saluce/P6TjC/

$(function() { 
    $(".image").draggable({helper: 'original'}); 
    $(".container").droppable({ 
     drop: function (event, ui) { 
      $(this).append(ui.draggable.css({position: 'static'})); 
      alert('dropped!'); 
     } 
    }); 
});​