- ベストアンサー
画像をドラッグ＆ドロップで移動したい
- 画像をドラッグ＆ドロップで移動する方法について解説します
- テキストと画像を併せて移動させることができる方法と、画像のみを移動させる方法について説明します
- Internet Explorer 7で画像のみをドラッグ＆ドロップで移動させるための対策方法について解説します
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<DIV style="略">文字列</DIV> とした場合、「文字列」をクリックした際に起こる、 マウスイベントで取得されるエレメントの対象はDIVです <DIV style="略"><img src="画像.gif"></DIV> とした場合、「画像.gif」をクリックした際に起こる、 マウスイベントで取得されるエレメントの対象はimgです img自体にはposition:absoluteによる絶対配置は設定されていないので、 target.style.top等による位置指定は適用できず失敗するのだと思います 画像単独ならば、divを使わずimgタグ自体にposition等のstyle設定を適用させることで解決できます div内にimgと文字列が混在し、両者を１つとして扱いたい場合は、 マウスダウン用のfunctionを function document_onmousedown(){ isDrag=1; target=event.srcElement; while(target.style.position != "absolute" && target.tagName != "BODY"){ target = target.parentNode; } } のようにして、positionがabsoluteか確認しつつ、 そうでなければtargetを上階層にしていくようにすれば大丈夫かと思います // tagNameの判別部はwhileによる上階層探索を最悪BODYで止め永久ループを防ぐためです ちなみにこれはIE6で試したものなので7用に変更が必要になるかもしれませんが、 考え方としては一緒になると思うので参考までに。 後はマウス動作が全てBODYにかかっているので、 BODY自体をクリックした時はどうするの？ ということも考慮していくのが望ましいと思いますよ
お礼
早速お答え頂きありがとうございます。 imgタグ内にstyle設定したらうまく画像のみでドラッグ＆ドロップで移動できました。IE7でも特に問題なく動作しました。 また、なぜ画像が移動しないかわかりやすく教えて頂きありがとうございます。 ＞BODY自体をクリックした時はどうするの？ ＞ということも考慮していくのが望ましいと思いますよ これは、DIV内の文字や画像やimgの画像以外の場所をクリックした場合ということでしょうか？特に問題は発生しませんでした。 丁寧に回答頂きありがとうございました。