![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_09.png?e8efa67)
複数のプログラムを拝借し組み合わせたのですが、以下3点の内容にしたく質問しました。宜しくお願いいたします。
(1)文字「このオブジェクトが移動します」を移動させその位置を表示したいのですが、マウスの位置が表示されています。
(2)文字「このオブジェクトが移動します」に合わせクリックすると反転表示になりますが反転表示にならないようにしたいです。
(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>
No.1ベストアンサー
- 回答日時:
とりあえず拝借したページを良く見て、どの部分のプログラムがどのように動くのかを調べるのがいいんじゃないかな?と思いました。
簡単なソースだと思うので、それぞれの場所でalertなどを使って、どのような値が入っているのかを調べるといいと思います。
>(1)文字「このオブジェクトが移動します」を移動させその位置を表示したいのですが、マウスの位置が表示されています。
event.clientXはイベント発生時のマウス座標を取っています。
オブジェクトの位置を知りたい場合は object.style.leftやobject.style.topなどになります。(positionがabsoluteの場合)
positionがrelativeになっているので、親のオブジェクトの位置も取得する必要があると思いますので、簡単にposition:absoluteに変えてしまった方がいいんじゃないかと思います。
>(2)文字「このオブジェクトが移動します」に合わせクリックすると反転表示になりますが反転表示にならないようにしたいです。
反転表示になりませんでした。(IE7)
>(3)動作するのですがエラーが表示されます。エラーの原因は何でしょうか
20行目のsampleというobjectが未定義というエラーだと思います。
sampleは document.getElementById('sample')などとしてObjectを正しく取得した方がいいと思います。
IE6とかだと動く気がします。
ご回答ありがとうございます。(2)は解決しましたが、(1)(3)
は力不足でわかりませんでした。試しに(1)(3)みたいにしましたが、問題解決に至らずどうすればいいのかよくわからないです。
(1)
sClientX.value = event.clientX;
sClientY.value = event.clientY;
↓
sClientX.value = text1.style.top;
sClientY.value = text1.style.left;
(2)
position:absoluteにしたことで反転表示はなくなりました。
(3)
var sample=document.getElementById('sample')
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ローカルのレジストリを読みたい
-
VBAによる第3、4水準文字の判定...
-
jsファイルを閲覧者がダウンロ...
-
innerHTMLなどの反映タイミング
-
JavaScriptで ブラウザの閉じる...
-
JSPの処理の途中で、JavaScript...
-
JavaScriptによる....
-
リクエスト結果が一瞬しか表示...
-
”吴”とはなんですか?
-
正整数の半角数字かどうか判定する
-
PHP処理実行後のページの遷移に...
-
ブラウザからエクセルを開く方法
-
ローカルフォルダにあるPHPファ...
-
htmlのfileタグに自動で値を入...
-
javascript中の記述でのJSP文<%%>
-
CSJSとSSJSの違い
-
javascriptで最初のところに戻...
-
javascriptでエクセルデータ読...
-
フォルダを自動で開く
-
Ajaxが動きません~『status=0』?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ローカルのレジストリを読みたい
-
Webページ中の javascript をVB...
-
エクセル2010のvbaについて
-
画面間でのJavaScrip...
-
クラス デフォルトプロパティの...
-
evtとは
-
javaScriptでグローバル変数に...
-
PHPで定義した変数を引数として...
-
jquery か javascript で json ...
-
【javascript】プロパティ?オ...
-
for each for in
-
JavascriptのDOMについて
-
イベントリスナに登録される fu...
-
フォルダ内のファイル名を取得...
-
文字を移動させその位置を表示...
-
CSSのクラスを動的に変更 classで
-
jQueryで、listの要素数を取得...
-
javascript 親オブジェクトと子...
-
VBSを学ぶ前に、、、
-
Ajaxのプログラムをオブジェク...
おすすめ情報