jqueryを利用してインラインフレームに画像をドラッグ&ドロップした

jqueryを利用してインラインフレームに画像をドラッグ&ドロップしたい

jqueryを使って、画像をドラッグしたり、それを自分で設定したエリアにドロップすることはできました
そこで、インラインフレームを使って表示している外部プログラムにドロップエリアを作成し、親フレームからインラインフレームに画像をドラッグ&ドロップして要素を渡したいと思ったのですがやり方が分かりません
よろしくお願いします

No.2 ベストアンサー 回答者： yyr446 回答日時： 2010/10/12 19:06

<iframe id="iframe1" src="/hoge.html" ></iframe>

という<iframe>要素があったとして、iframe内の要素の取得するのに、
iframe内のdocumenntオブジェクトを、
iframe.contentDocumentで取得
※古いIEだと、iframe.contentWindow.documentでよい
よって、
var content=iframe.contentDocument||iframe.contentWindow.document;
とすれば、
content.getElementById("xxx")
の様にiframe内の任意の要素が取得できる。

他のdocumenntオブジェクトに要素を追加したりする時は、
document.importNodeを使って複製した方が良い（又はdocument.adoptNode※IEはだめ）
var oldNode = document.getElementById("fuga");
var newNode = content.importNode(oldNode,true);
content.body.appendChild(newNode);

マウスイベントは一考！
他に書いてる人がいた
http://oshiete.goo.ne.jp/qa/6245303.html

No.1 回答者： fujillin 回答日時： 2010/10/12 12:48

＞画像をドラッグしたり、それを自分で設定したエリアにドロップすることはできました

通常のドラッグ・アンド・ドロップはできるということですので…

フレーム内は別ドキュメントとなりますので、ドラッグ等の処理を同時に複数のドキュメントで行なうのは少々面倒かと思います。
インラインフレームとのことなので、ドラッグ処理は親ドキュメント内で行い、ドロップ時にフレーム内かどうかを判断して、フレーム内であれば要素をフレーム内に生成するようなロジックにすればよろしいのではないでしょうか？
フレーム内の要素をドラッグする際も、一度、親ドキュメントに移してからドラッグさせるようにすれば、全体が同じ処理でいけそう。
親ドキュメント、インラインフレームが独立してスクロールできるので位置座標の変換にはそれぞれのスクロール量を加減する必要があります。
ただし、要素を両方にまたがったところにドロップされたらどうするのかなど、先に仕様をきちんとしておく必要があると思われます。

考え方は他にもいろいろあると思いますので、あくまでもヒントとして。