draggablesをお互いにドラッグ

Question

私の質問は、jQueryを互いにドラッグする方法があるのですか？私はこれが非常に曖昧であることを知っているので、私はあなたが何を意味するかを見せます。

私はthisを複製しました（私はそれを編集することができます）。それにいくつかのスタイリングを適用しました。

これはfiddleです。

「ドラッグ」要素を最初のボックスにドラッグすることができます。ある要素を別の要素の上にドラッグすると、その要素を他の要素に配置する必要があります。あなたが私を助けてくれることを願っています。 （私はjQuery UIの使用に縛られていません）。

$(".container").droppable({ 
    // accept draggables only from #toolbox, 
    // this will prevent cloning of the draggables(inside drop event handler), 
    // that already have been dropped inside #container 
    accept: "#contain .drag", 
    drop: function (event, ui) { 
    // when a draggable is dropped: 
    // 1: clone it's helper 
    // 2: Make the helper draggable 
    // 3: set containment to #container 
    $(this).append($(ui.helper).clone().draggable({ 
     containment: "parent" 
    })); 
    } 
}); 
$("#contain .drag").draggable({ 
    revert: "invalid", 
    helper: "clone" 
}); 

EDIT：新しいフィドルが追加され、マークアップが改善されました。 P.S.:Scott

Answer 1

要素を削除した後の状態を調べて、2番目のボックスの要素の状態と一致させるためにjQueryを使用しました。

まず、styleクラスを追加して、draggableクラスを削除しました。しかし、jQueryも絶対配置を使用していたため、要素からも削除する必要がありました。

注意：要素はdisplay: blockなので、左から右に積み重ねません。

https://jsfiddle.net/p1fwf4L7/3/