- ベストアンサー
JavaScriptで画像Ｄ＆Ｄ
ちょっとした「遊びもの」を作るため、 ｗｅｂブラウザ上で画像をドラッグ＆ドロップできるように したいのですが、なかなかうまく作れません。 クロスブラウザ仕様じゃなく、ＩＥ専用でいいので どなたかいい感じのスクリプトを知りませんか？ ちなみに画像は２個以上でお願いします。
- meke2
- お礼率79% (23/29)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
Dynamic HTML cross-browser/Examples http://www.fureai.or.jp/~tato/DHTML/simple/contents.htm の中にある Base Script for Dragon レイヤをドラッグして動かすための基本スクリプト http://www.fureai.or.jp/~tato/DHTML/simple/part2/sample/dragdrag/dragbase.htm がまさにご要望のものだと思います。 参考まで
その他の回答 (1)
- ku-tan
- ベストアンサー率0% (0/2)
ファイルが添付できないのでソース貼っちゃいます。不都合があるときはメールください。 <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-8; target.style.left=event.clientX-8;} } function document_onmouseup(){ isDrag=0; sample.style.top=text1.style.top; sample.style.left=text1.style.left; //alert(text1.style.top); //alert(event.srcElement); } </SCRIPT> <BODY onmousemove="document_onmousemove()" onmousedown= "document_onmousedown()" onmouseup="document_onmouseup()"> <DIV id=text1 style="position:absolute;font-size:24px; cursor:hand"> <!--ここにIMGで画像を置いてください--> (^ ^; </DIV> <DIV id=text2 style="position:absolute;font-size:24px; cursor:hand"> <input type="text"> </DIV> <BR> <BR> <BR> <DIV style="position:relative" id=sample> このオブジェクトが移動します </DIV>
お礼
ご返答ありがとうございます！ スクリプトはＩＥのみ(？)と言うことでとても見やすいです！ が、画像のみをＤ＆Ｄがうまくいかないようです。(顔文字なら可) メールで連絡と言うことですが、あまり迷惑もかけては悪いので 自粛させてもらいます。 あと、テキストエリアも動かせるのは発見ものでした！参考にさせて頂きます！
お礼
ご返答ありがとうございます！ こんなサイトもあるんですね。これからの「遊びもの」作りにとても 役立ちそうな感じです！ (クロスブラウザ仕様がちょっと気になりますが＞なにせスクリプトが多いから) ぴったりのご回答ありがとうございました！