ちょっとした「遊びもの」を作るため、
webブラウザ上で画像をドラッグ&ドロップできるように
したいのですが、なかなかうまく作れません。

クロスブラウザ仕様じゃなく、IE専用でいいので
どなたかいい感じのスクリプトを知りませんか?

ちなみに画像は2個以上でお願いします。

このQ&Aに関連する人気のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

ご返答ありがとうございます!
スクリプトはIEのみ(?)と言うことでとても見やすいです!
が、画像のみをD&Dがうまくいかないようです。(顔文字なら可)
メールで連絡と言うことですが、あまり迷惑もかけては悪いので
自粛させてもらいます。
あと、テキストエリアも動かせるのは発見ものでした!参考にさせて頂きます!

お礼日時:2001/03/08 23:38

Dynamic HTML cross-browser/Examples


http://www.fureai.or.jp/~tato/DHTML/simple/conte …

の中にある

Base Script for Dragon
レイヤをドラッグして動かすための基本スクリプト
http://www.fureai.or.jp/~tato/DHTML/simple/part2 …

がまさにご要望のものだと思います。

参考まで

参考URL:http://www.fureai.or.jp/~tato/DHTML/simple/conte …
    • good
    • 0
この回答へのお礼

ご返答ありがとうございます!
こんなサイトもあるんですね。これからの「遊びもの」作りにとても
役立ちそうな感じです!
(クロスブラウザ仕様がちょっと気になりますが>なにせスクリプトが多いから)

ぴったりのご回答ありがとうございました!

お礼日時:2001/03/08 23:45

このQ&Aに関連する最新のQ&A

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


このカテゴリの人気Q&Aランキング

おすすめ情報

カテゴリ