- 締切済み
文字を移動させその位置を表示したい
複数のプログラムを拝借し組み合わせたのですが、以下3点の内容にしたく質問しました。宜しくお願いいたします。 （１）文字「このオブジェクトが移動します」を移動させその位置を表示したいのですが、マウスの位置が表示されています。 （２）文字「このオブジェクトが移動します」に合わせクリックすると反転表示になりますが反転表示にならないようにしたいです。 （３）動作するのですがエラーが表示されます。エラーの原因は何でしょうか？ <HTML> <HEAD> <STYLE type="text/css"> </STYLE> <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; } document.onmouseup = fOnmousemove; function fOnmousemove() { sClientX.value = event.clientX; sClientY.value = event.clientY; } //--> </SCRIPT> </HEAD> <BODY onmousemove="document_onmousemove()" onmousedown= "document_onmousedown()" onmouseup="document_onmouseup()"> <DIV style="position:relative" id=sample> このオブジェクトが移動します </DIV> <DIV id="test" id=text1 style="position:absolute;font-size:24px; cursor:hand"> </DIV> <SCRIPT language="JavaScript"> </SCRIPT> clientX=<input type="text" id="sClientX"><br> clientY=<input type="text" id="sClientY"><br> </BODY> </HTML>
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- みずの（@mizuno3）
- ベストアンサー率73% (192/263)
とりあえず拝借したページを良く見て、どの部分のプログラムがどのように動くのかを調べるのがいいんじゃないかな？と思いました。 簡単なソースだと思うので、それぞれの場所でalertなどを使って、どのような値が入っているのかを調べるといいと思います。 >（１）文字「このオブジェクトが移動します」を移動させその位置を表示したいのですが、マウスの位置が表示されています。 event.clientXはイベント発生時のマウス座標を取っています。 オブジェクトの位置を知りたい場合は object.style.leftやobject.style.topなどになります。（positionがabsoluteの場合） positionがrelativeになっているので、親のオブジェクトの位置も取得する必要があると思いますので、簡単にposition:absoluteに変えてしまった方がいいんじゃないかと思います。 >（２）文字「このオブジェクトが移動します」に合わせクリックすると反転表示になりますが反転表示にならないようにしたいです。 反転表示になりませんでした。(IE7) >（３）動作するのですがエラーが表示されます。エラーの原因は何でしょうか 20行目のsampleというobjectが未定義というエラーだと思います。 sampleは document.getElementById('sample')などとしてObjectを正しく取得した方がいいと思います。 IE6とかだと動く気がします。
お礼
ご回答ありがとうございます。（２）は解決しましたが、（１）（３） は力不足でわかりませんでした。試しに（１）（３）みたいにしましたが、問題解決に至らずどうすればいいのかよくわからないです。 （１） sClientX.value = event.clientX; sClientY.value = event.clientY; ↓ sClientX.value = text1.style.top; sClientY.value = text1.style.left; （２） position:absoluteにしたことで反転表示はなくなりました。 （３） var sample=document.getElementById('sample')