画像をドラッグ&ドロップで移動したいのですが、
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>
No.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と文字列が混在し、両者を1つとして扱いたい場合は、
マウスダウン用の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の画像以外の場所をクリックした場合ということでしょうか?特に問題は発生しませんでした。
丁寧に回答頂きありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
textareaに画像を表示したい
-
【早急】画像入れ替えJavaScrip...
-
1枚の画像をクリックして複数の...
-
画像ランダム表示、しかしダブ...
-
キャッシュされた画像を使わず...
-
透過pngの透明部分以外をクリッ...
-
JAVASCRIPTでアクセス毎に画像...
-
javascriptテキストBOX色を元に...
-
テキストエリア内の一部の文字...
-
フッターの下に隙間ができてしまう
-
HTMLですCSSです この画像のよ...
-
背景色と連動するスライドショ...
-
スライドショー「Skitter」をカ...
-
web制作(HP作成について教えて...
-
HTMLタグに複数のクラスを設定...
-
スワップイメージのフェード方...
-
アコーディオンメニューが開い...
-
サムネイルにカーソルを合わせ...
-
大量のチェックボックス状態取...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascript で共通の処理をどこ...
-
Javascriptで指定した日付と時...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
1枚の画像をクリックして複数の...
-
画像ランダム表示、しかしダブ...
-
スライダーを実装した場合、ペ...
-
1枚の画像をクリックすると複数...
-
HTMLで条件分岐はできますか?
-
JavaScript スライドの画像にリ...
-
オンマウスで、画像切り替え+...
-
画像の重なりの順序を代える方...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
画像をドラッグ&ドロップで移...
-
各フォルダから1枚ずつ画像をラ...
-
jQueryで特定のURLの時のみ表示
-
bxsliderにて読み込み後に内容...
-
prettyphotoの画像表示について
-
WEBページ立ち上げ時に1回のみ...
おすすめ情報