画像をドラッグ＆ドロップで移動したいのですが、 DIV内でテキスト文だと移動できるのですが、画像だけだと移動できません（テキスト文と画像を入れるとテキスト文と一緒に画像が移動しますが、テキスト文なしの画像だけで移動させたいです。）何故、画像だけでドラッグ＆ドロップで移動させることができないのでしょうか？画像だけで移動させるにはどうしたらいいでしょうか？宜しくお願いいたします。 IE7です。画像をドラッグ＆ドロップで移動したい var target; var isDrag=0; function document_onmousedown(){ isDrag=1; target=event.srcElement;} function document_onmousemove(){ if( isDrag ){ target.style.top=event.clientY; target.style.left=event.clientX;} } function document_onmouseup(){ isDrag=0; //alert(text1.style.top); //alert(event.srcElement); }

画像をドラッグ＆ドロップで移動したい

解決済

質問者：flas222
質問日時：2007/10/29 18:07
回答数：1件

画像をドラッグ＆ドロップで移動したいのですが、
DIV内でテキスト文だと移動できるのですが、画像だけだと移動できません（テキスト文と画像を入れるとテキスト文と一緒に画像が移動しますが、テキスト文なしの画像だけで移動させたいです。）
何故、画像だけでドラッグ＆ドロップで移動させることができないのでしょうか？画像だけで移動させるにはどうしたらいいでしょうか？
宜しくお願いいたします。
IE7です。

<HTML>
<HEAD><TITLE>画像をドラッグ＆ドロップで移動したい</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
var target;
var isDrag=0;
function document_onmousedown(){
isDrag=1;
target=event.srcElement;}
function document_onmousemove(){
if( isDrag ){
target.style.top=event.clientY;
target.style.left=event.clientX;}
}
function document_onmouseup(){
isDrag=0;

//alert(text1.style.top);
//alert(event.srcElement);
}
</SCRIPT>
<BODY onmousemove="document_onmousemove()" onmousedown=
"document_onmousedown()" onmouseup="document_onmouseup()">
<DIV style="position:absolute;font-size:24px;cursor:hand; ">
<img src="画像.gif">
</DIV>

<BR>
<BR></BODY></html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： suzuki-_-
回答日時：2007/10/29 22:37

<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自体をクリックした時はどうするの？
ということも考慮していくのが望ましいと思いますよ

- 0
- 件

通報する

この回答へのお礼

早速お答え頂きありがとうございます。
imgタグ内にstyle設定したらうまく画像のみでドラッグ＆ドロップで移動できました。IE7でも特に問題なく動作しました。
また、なぜ画像が移動しないかわかりやすく教えて頂きありがとうございます。

＞BODY自体をクリックした時はどうするの？
＞ということも考慮していくのが望ましいと思いますよ
これは、DIV内の文字や画像やimgの画像以外の場所をクリックした場合ということでしょうか？特に問題は発生しませんでした。

丁寧に回答頂きありがとうございました。

通報する

お礼日時：2007/10/30 12:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！