HTMLで異なるウィンドウへのドラッグ＆ドロップ処理を実装したい

Question

前提・実現したいこと

HTMLで、別ウィンドウから別ウィンドウへのドラッグ＆ドロップした際、ドラッグ元のドラッグした要素情報を取得したい。（ID、クラス等・・・。）

【行いたい事イメージ】
１．Window Aの要素Aをドラッグ
↓
２．Window Bへドロップ
↓
３．Window B側のJQueryで、ドラッグした要素をdropイベントで取得（この場合は要素A）
↓
４．取得した要素によって、別々の処理を行う。
例) 要素Aの場合は画面を閉じる、要素Bの場合は画面サイズを変える・・・

発生している問題・エラーメッセージ

実装するために、上記３の処理で、ドラッグした要素を取得したいのですが、取得する方法がわかりません。

できればIE,Edge,Chromeそれぞれ対応したいですが、最悪Chromeだけでも構いません。

Comments

[2KOH]

「HTML ドラッグ＆ドロップ API」などのキーワードで検索しましたか？
検索してわからなかったなら、何がわかっていて何がわからないのかをより具体的にして質問内容を追記してください。
検索していないなら検索してください。

[2KOH]

上とは別件です。
3. の「Window A側」は「Window B側」の間違いではないですか？
Window B へ要素A をドロップしたところで、Window A で dropイベントが発火するわけがないので。

[Thresh]

「HTML ドラッグ＆ドロップ API」で調べてみたところ、dataTransfer.setDataを用いれば任意の値の受け渡しができることを確認しました。ありがとうございます。
jQueryUIでばかり検索していたのが間違いでした。

>> 3. の「Window A側」は「Window B側」の間違いではないですか？
すみません、記載ミスでした。修正いたしました。

Answer 1

	// Window A 側処理
	$("document").on("dragstart", ".hoge", function(e){
		console.log("ドラッグ開始しました");
		e.originalEvent.dataTransfer.setData("text", "hogeがドラッグ");
	});

	// Window B 側処理
	$(document).on("dragenter", function (e){
		e.stopPropagation();
		e.preventDefault();
	});
	$(document).on("dragover", function (e){
		e.stopPropagation();
		e.preventDefault();
	});
	$(document).on("drop", function (e)	{
		e.preventDefault();
		alert(e.originalEvent.dataTransfer.getData("text"));
	});

上記でWindow B側で「hogeがドラッグ」という文字を取得することができました。
IE,Chrome,Edgeでそれぞれ動作しました。

Answer 2

windowが違うならまたがったドラッグアンドドロップは期待しないほうがよいでしょう

Comments

[2KOH]

少なくとも Chrome 同士であれば、異なるウィンドウ間のドラッグ&ドロップは可能ですよ。
Firefox や Edge も、自分で確かめたことがなくて明言できませんが、おそらく可能だと思います（IE は怪しいですが）。
ただ、やり取りできるデータはあらかじめドラッグ元で指定したデータに限るという制限がありますが。

……というようなことは、ドラッグ＆ドロップAPI を調べればわかることなので、質問への追記・修正に「まず検索してください」とコメントしています。