子ウィンドウから親ウィンドウへのドラッグアンドドロップ

Question

webプログラミング初心者です。

動作環境はIE11でjQueryとC#(ASP.NET)を使用しています。
子ウィンドウでドラッグした要素(td要素)を親ウィンドウでドロップさせたいのですが、ウィンドウ間をまたぐようなドラッグアンドドロップは可能なのでしょうか。
同一ウィンドウ内ではjQueryUIのdraggableとdroppableを用いて実現できたのですが、ウィンドウをまたいでドラッグを行おうとするとドラッグした要素がウィンドウを超えません。
コーディングの方法によっては実現可能なのでしょうか。それともブラウザの制約等で実現できないのでしょうか。

※初心者であるためwebの基礎的な部分について十分に理解できておらず、曖昧な質問の仕方になってしまい申し訳ありません。

Comments

[退会済みユーザー]

MVC か Web Forms かどちらですか？ 開発環境(OS,.NET, Visual Studio のバージョンなど) は？ 親・子ウィンドウとは具体的に何でしょう？ 以上を質問欄に追記してください。

Answer 1

質問者さんはどこかに行ってしまったようですが・・・

ASP.NET の機能としては MVC にも Web Forms にも Drag & Drop できるような機能はなさそうです。

jQuery UI とか Ajax Control Toolkit にもウィンドウを超えて Drag & Drop できる機能はなさそうです。（自分が知る限りですが）

ブラウザが IE11 ということですので使えないかもしれませんが、HTML5 の Drag & Drop をフルにサポートしているブラウザ（Chrome とか Firefox など）であれば、同じブラウザはもちろん異なるブラウザ間でも可能なようですので、それを検討してはいかがですか。

以下の記事が参考になると思います。

ネイティブ HTML5 ドラッグ＆ドロップ
https://www.html5rocks.com/ja/tutorials/dnd/basics/

ドラッグ操作
https://developer.mozilla.org/ja/docs/DragDrop/Drag_Operations

以下の画像は、上の前者の記事の通りに作ったアプリを Chrome で表示して、それとは別にドロップして受け取ることができるページを作り、それを Firefox に表示してマウスで Drag & Drop 操作をしているとことです。

マウスを離してドロップすると前者の記事のコードで e.dataTransfer.setData('text/html', this.innerHTML); とした部分即ち <header>B</header> がドロップされます。

Answer 2

原則無理だと思いますが、cloneして元のオブジェクトを消すなど特別な処理をすれば
できるかもしれません。（それがドラッグアンドドロップかといわれると微妙）

またモーダル的な処理でやる手もありますが、その場合本来モーダルは親ウィンドウの
処理を止めるべきなので、ロジックとしておかしいかもしれません

Comments

[退会済みユーザー]

HTML5 の Drag & Drop はいかがですか？ IE11 ではフルにサポートされてないので候補から外されたのかもしれませんが・・・