jQuery複数のアイテムをバインドするドラッグアンドドロップ

Question

Arrayにバインドされているアイテムのリストが必要です。 たとえば、 アイテムは、タイトル、説明、およびイメージを持ちます。

「タイトル、説明、画像」のうちの1つ以上を持つDrop PlaceHolderがあります。

アイテムをPlaceHolderにドラッグするコンポーネントが存在する場合、コンポーネントが更新されます。

これで任意の助けいただければ幸いです。あなたがui.draggableにドラッグされている要素を取得することができます

Answer 1

：

$(".draggable").draggable({ revert:true }); 
$("#placeholder").droppable({ 
    drop: function(event, ui) { 
     var draggable = $(ui.draggable); 
     var droppable = $(this); 

     // Update droppable using draggable's sub-itens 
     droppable.find(".title").html(draggable.find(".title").html()); 
     droppable.find(".description").html(draggable.find(".description").html()); 
     droppable.find(".image").attr("src",draggable.find(".image").attr("src")); 
    } 
}); 

を残りの部分では、ドラッグ可能と何をしたいかに依存します：プレースホルダへのサブitensのコンテンツをコピーしますか？クローンを作成してプレースホルダを置き換えますか？プレースホルダを元のものに置き換えますか？

上記の例では、プレースホルダの内容をドラッグされた要素の内容で更新することを前提としています（各アイテムのプロパティはクラスによって識別されます）。 draggable（ソース配列のインデックスなど）に関する詳細が必要な場合は、data関数を使用することもできます。