jQueryでドラッグアンドドロップ

Question

jQueryでドラッグアンドドロップを行う場合、jQuery UIを使用すれば簡単に出来ることが分かりました。

	$(".dragDiv").draggable();

	$( "#div3" ).droppable({
		accept : ".dragDiv" , // 受け入れる要素を指定
		drop : function(event , ui){ // ドロップされた時に動きます
                    console.log("ドロップされました");
		} 
	});

参考
https://liginc.co.jp/web/js/jquery/102848

これを使用した、ウィンドウズエクスプローラの様にフォルダAからフォルダBにファイルをドロップさせるライブラリの様なものはあるでしょうか。
なければ自作することになりますが、既出のものがあればと思いました。

ソース

<div id="folda1">
  <div id="file1">file1</div>
  <div id="file2">file2</div>
  <div id="file3">file3</div>
</div>

<div id="folda2">
</div>

追記
フォルダは例えで、移動させるのはdiv要素になります。
移動させる時に元のdiv要素を残して、新しく作成したdiv要素をdrag&dropさせるという意味です。
簡単に言うと要素のコピーです。

Comments

[m.ts10806]

htmlからはあくまで画面内での移動に見えますが「フォルダ」は例えですか？本当にフォルダ間ですか？後者であればJavaScriptの範疇ではありません。サーバーサイドの処理と組み合わせれば不可能ではないとは思いますが、その「フォルダ」がどこにあるかによります。要件を具体化願います

[uer03108]

情報不足でした。フォルダではありません。div要素になります。div要素をそのままDrag&Dropするのではなく、ウィンドウズエクスプローラの様に元div要素を残すという意味です。結果的にdiv要素が1つ増えます。

[m.ts10806]

質問は編集できるので追記できますか？要件としては大事なところなので、本文に追記することで分かりやすくなります

[uer03108]

追記いたしました。

Answer 1

copy自体はcloneメソッドで行います。

• jQueryリファレンス：clone(true)
• 既存の要素をコピーするには？ ― cloneメソッド

あとは、このclone()メソッドを実行するタイミングを、ドラッグが始まったタイミングにして、
clone()するのをドラッグで掴んだ要素で差し替えればできそうです。
実際はクリックした瞬間にclone()しておき、ドラッグが始まったら動かすのをコピーした要素にする感じですね。

Comments

[uer03108]

回答ありがとうございます。
仰る方法で出来そうです。
あとは、クリックを離した時にドラッグした要素が、コピー先のdiv領域内に収まっているかを判定すれば大丈夫かと思います。
div領域外でクリックを離した場合は、div要素を削除する必要がありますが。

[m.ts10806]

座標とか色々監視すればできそうですね。いわゆる「あたり判定」というやつで。
どこかに初期化処理を準備しておいて、それを都度呼び出すようにすると要素の作成も削除も効率的にできると思います。
ヒントになったようで何よりです。

[uer03108]

そうですね。
色々と有難うございました。
参考になりましたm(_ _)m