移動できる顔文字とマウスポインタとのズレが生じる
- 画面下の方に移動させると顔文字とマウスポイントの位置が重ならず距離が生じてしまいます。
- マウスポイントと顔文字が重なって移動するようにするにはどうすればいいでしょうか？
- オブジェクトをドラッグ＆ドロップで移動させたい
- ベストアンサー
移動できる顔文字とマウスポインタとのズレが生じる
顔文字をマウスポインタで移動できるようにしたのですが、 画面上では問題ないのですが画面下の方に移動させると顔文字とマウスポイントの位置が重ならず距離が生じてしまいます。マウスポイントと顔文字が重なって移動するようにするにはどうすればいいでしょうか？ 宜しくお願いいたします。 <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; } </SCRIPT> <BODY onmousemove="document_onmousemove()" onmousedown= "document_onmousedown()" onmouseup="document_onmouseup()"> <DIV id=text1 style="position:absolute;font-size:24px; cursor:hand"> (^ ^; </DIV> <BR> <BR> <BR> <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a </body> </HTML>
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
すみません、No1のままだとFirefoxで動きませんでした。動かす場合は以下のようにしてください。 --------------------------------- <HTML> <HEAD><TITLE>オブジェクトをドラッグ＆ドロップで移動したい</TITLE> </HEAD> <SCRIPT language="JavaScript"> function pointerX(event) { return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); } function pointerY(event) { return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); } var target; var isDrag=0; function document_onmousedown(event){ isDrag=1; target=event.target || event.srcElement;} function document_onmousemove(event){ if( isDrag ){ target.style.top=pointerY(event)-8; target.style.left=pointerX(event)-8;} } function document_onmouseup(){ isDrag=0; } </SCRIPT> <BODY onmousemove="document_onmousemove(event)" onmousedown= "document_onmousedown(event)" onmouseup="document_onmouseup(event)"> <DIV id=text1 style="position:absolute;font-size:24px; cursor:hand"> (^ ^; </DIV> 【略】 </body> </HTML> ------------------------------------------ IEとFFのイベント周りはかなり違いがあって両方対応するのは骨が折れます・・・。
その他の回答 (1)
- susie-t
- ベストアンサー率86% (37/43)
修正したスクリプト部分を記述します。 ---------------------------------------------- function pointerX(event) { return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); } function pointerY(event) { return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); } var target; var isDrag=0; function document_onmousedown(){ isDrag=1; target=event.srcElement;} function document_onmousemove(){ if( isDrag ){ target.style.top=pointerY(event)-8; target.style.left=pointerX(event)-8;} } function document_onmouseup(){ isDrag=0; } ---------------------------------------------- IEのevent.clientX/Yは画面上の位置なのでスクロールすると意図されている値が取れません。この場合、スクロール分を加算します。Firefoxではevent.pageX/Yを使います。こちらはページ上の位置なのでそのままです。(pointerX/Y関数はprotoype.jsから流用して関数化したものです) 参考になれば幸いです。
お礼
ありがとうございます。
関連するQ&A
- 文字を移動させその位置を表示したい
複数のプログラムを拝借し組み合わせたのですが、以下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
- 画像をドラッグ＆ドロップで移動したい
画像をドラッグ＆ドロップで移動したいのですが、 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>
- ベストアンサー
- JavaScript
- 「nullまたはオブジェクトではありません」というエラーが出ます。
こんにちは、IE7、VISTAで試しています。 エラーもなく動いたのですが、 sClientXとsClientYの値をフォームメールでデータ送信したくて clientX=<input type="text" id=sClientX><br> clientY=<input type="text" id=sClientY><br> という部分を<form>内に入れると 「sClientXはnullまたはオブジェクトではありません」 というエラーが出ます。 エラーの原因はなんでしょうか？ <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- var sample; var sClientX; var sClientY; 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; sClientX.value = document.getElementById('sample').style.left; sClientY.value = document.getElementById('sample').style.top; } document.onmouseup = fOnmousemove; function fOnmousemove() { } //--> </SCRIPT> </HEAD> <BODY onmousemove="document_onmousemove()" onmousedown= "document_onmousedown()" onmouseup="document_onmouseup()"> <DIV style="position:absolute" id=sample> このオブジェクトが移動します </DIV> <DIV id=text1 style="position:absolute;font-size:24px; cursor:hand"> </DIV> <form> clientX=<input type="text" id=sClientX><br> clientY=<input type="text" id=sClientY><br> </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
- addEventListnerについて
最近、Javascriptを用いたイベントドリブンな表現をしているサイトが目立ちます。これについて、どのように実装しているのか自分なりに調べてみたところ、多くのプログラマーのBlogの記事に「addEventListner」という単語が見られました。これについては、イベントを登録するための関数である、ということは把握しているのですが、これを使う理由は何でしょうか？普通に var target = document.getElementById("target"); target.onmousemove = function(){}; target.onmousedown = function(){}; target.onmouseup = function(){}; で良いと思うのですが。
- ベストアンサー
- JavaScript
- メニュー3つとも個々にドロップして移動したいのですが
メニュー3つとも個々にドロップして移動したいのですが、どのように すれば良いのでしょうか。 お願いします。 <html> <head> <title>ドラッグして画像を移動する</title> <script type="text/javascript"><!-- //2つ適応 window.onload=function(){ flag = false; offx = 80; offy = 100; document.getElementById("menu1").onmousedown= function dragOn(){ flag = true;} window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(){ if (!flag) return; document.getElementById("menu1").style.top = event.y-offx; document.getElementById("menu1").style.left = event.x-offy; return false;} } // --></script> </head> <body> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;">メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;">メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> </body> </html>
- ベストアンサー
- JavaScript
- ボタン上でマウスを押している間に、ウィンドウをスクロールしたい
フォームボタンを押している間、インラインフレームのウィンドウをスクロールしたいのですが 思うように動作してくれません。 最初、タグのonmousedown属性とonmouseup属性を使用して 簡単に実装できると思っていたのですが mouseupのイベントがうまく拾えないようで、あきらめました。 下記のようなマウスドラッグのサンプルソースがあったので こちらを改造しようと思ったのですが、いろいろいじってみてもだめでした。 「マウスが離された」というイベントはどうすれば拾えるのでしょうか？ IE限定の動作を予定しています。 よろしくお願いいたします。 <script type="text/javascript"> //tab→全角スペース //マウスをクリックして動かしている間だけスクロールする window.document.onmousemove = scrollSubWindow; window.document.onmouseup = scrollOff; scrollFlag = false; function scrollOn() { scrollFlag = true; } function scrollOff() { scrollFlag = false; } function scrollSubWindow() { if( !scrollFlag ) return; Dummy.scrollBy( 0, 10 ); return false; } </script> <iframe src="dummy.html" name="Dummy" width=200 height=200></iframe> <input type="button" value="下へ" onMousedown="scrollOn()" style="width: 200px; height: 200px;">
- 締切済み
- JavaScript
- 【Javaxcript CSS】擬似フレームサイズをマウスで変更したい
擬似フレームのサイズをマウスで変更したいです。 以前「CSSで指定したwidthをマウスで変更したい」 （http://oshiete1.goo.ne.jp/qa3849904.html） で質問し、頂いたズバリ回答（以下）で実現できるのですが、使っているとマウスが時々くっついてしまいます。 これは、しょうがない問題と諦めていたのですが、なんとかならないものでしょうか？ <html> <head> <style type="text/css"> #f1 { float:left; width:20%; overflow: auto; background-color : #ffd2ff; } #f2 { float:right; width:80%; background-color : #e0fef8; } #space { float:left; width:5px; background-color : #ffffff; cursor:E-resize; } </style> </head> <body> <script> window.onload = function(){ var Drag = 0, i = function(id){ return document.getElementById(id) }; i('space').onmousedown = function(){ Drag = 1; } document.onmouseup = function(){ Drag = 0; } document.onmousemove = function(e){ if(!Drag){ return false; } var ev = window.event || e; var W = document.body.offsetWidth || document.documentElement.offsetWidth; var L = parseInt( ev.clientX/W *100, 10); var R = 100 - L; if(L >1 && R > 1){ i('f1').style.width = L + '%'; i('f2').style.width = R + '%'; } } } </script> <div id="f1">f1</div> <div id="f2"> <div id="space"> </div> f2</div> </body> </html>
- ベストアンサー
- JavaScript
- イベントバブル、マウスオーバーなどに関して
http://okwave.jp/qa/q6681276.html に関連しますが divの中に、p、ulが同列にあり div領域からmouseoutしたらイベントが起きるようにしたいと思っています。 イベントは親要素に伝播するということなので event.cancelBubble = true; window.event.cancelBubble=true; をp,ulのイベントに入れました。 又、各要素のマウス状態の履歴をテーブルに残してみました（下にソース）。 （マウスアウトしたら「x」、オーバーで「o」） その結果、 バブリング防止策を講じたため pまたはulのマウスアウトはdivに伝わっていません(ただしFirefoxではダメ？)。 ところがよく見ると div→p div→ul と移動する際、div内ではありますが divは一旦マウスアウトしてから再びマウスオーバーとなっているようです。 まず、ここまでの理解は間違っていないでしょうか？ そして、境界線をまたぐ際、マウスアウトになるのはどうにもならないのでしょうか？ 基本的な質問で申し訳ありませんが、よろしくお願いします。 --------------------------------------------------------------------------------------------- <script style="text/javascript"> function divOn() { document.getElementById('atDiv').innerHTML=document.getElementById('atDiv').innerHTML+'o'; } function divOff() { document.getElementById('atDiv').innerHTML=document.getElementById('atDiv').innerHTML+'x'; } function pOn() { document.getElementById('atP').innerHTML=document.getElementById('atP').innerHTML+'o'; } function pOff() { document.getElementById('atP').innerHTML=document.getElementById('atP').innerHTML+'x'; } function ulOn() { document.getElementById('atUl').innerHTML=document.getElementById('atUl').innerHTML+'o'; } function ulOff() { document.getElementById('atUl').innerHTML=document.getElementById('atUl').innerHTML+'x'; } function stopBubbling() { event.cancelBubble=true; stopPropagation=true; } </script> <div onMouseover="divOn();" onMouseout="divOff();" style="background:#fee;padding:1em;height:300px;">div <p onMouseover="pOn();" onMouseout="stopBubbling();pOff();" style="background:#efe;height:100px;">p</p> <ul onMouseover="ulOn();" onMouseout="stopBubbling();ulOff();" style=";background:#eef;height:100px;"> <li><a>li</a></li> <li><a>li</a></li> </ul> </div> <table border="1"> <thead> <tr> <th>div</th> <th>p</th> <th>ul</th> </tr> </thead> <tbody> <tr> <td id="atDiv"><br /></td> <td id="atP"><br/></td> <td id="atUl"><br/></td> </tr> </tbody> </table>
- ベストアンサー
- JavaScript
- 文字がマウスカーソルを追従するスクリプト
いつもお世話になっております。 以下のサンプルスクリプトでinnerText・style.left・style.topと書いてあるところがあるのですが、これはどういう意味なのでしょうか？ どなたかわかる方、教えてください。 お願いします。 <HTML> <HEAD> <TITLE>マウスポインタ座標表示</TITLE> <STYLE TYPE="text/css"> <!-- #msxy { position:absolute; top:0px; left:0px; width:48px; color:black; background-color:yellow; font-size:7pt; border-width:1px; border-size:1px; border-style:solid; } --></STYLE> <SCRIPT Language="JavaScript"> <!-- function displayMouseXY(evt) { var X = Y = 0; if (document.all) { X = event.x; Y = event.y; document.all["msxy"].innerText = X+","+Y; document.all["msxy"].style.left= X + 8; document.all["msxy"].style.top = Y + 16; } if (document.layers) { X = evt.x; Y = evt.y; with(document.layers["msxy"]) { document.open(); document.write("<SMALL>"+X+","+Y+"</SMALL>"); document.close(); left = X + 8; top = Y + 16; bgColor = "yellow"; } } } if (document.all) document.onmousemove = displayMouseXY; if (document.layers) { window.onmousemove = displayMouseXY; window.captureEvents(Event.MOUSEMOVE); } // --> </SCRIPT> </HEAD> <BODY BGCOLOR="white"> マウスポインタ座標表示<BR> <DIV ID="msxy"></DIV> </BODY> </HTML>
- ベストアンサー
- JavaScript
- Delphi６ OnMouseUp
deiphi6です。 OnMouseDown,OnMouseMoveイベントで返ってくるX,Y座標値と、OnMouseUpで返ってくるX,Y座標値に違いがあります。 例えば、 ScrollBoxの中にPaintBoxを置いて、PaintBoxのWidth(Height)を32768以上にします。 実行させ、スクロールさせてPaintBoxが32768以上のポイントでマウスボタンを押して離すと。 OnMouseUpで返ってくるX(Y)座標はマイナスになります。 また、65536以上にするとまた1から始まるプラスのX座標がかえってきます。 OnMouseDown,OnMouseMoveでは正常なプラス値です。 つまり、Intergerで返ってきてないってことですか？ OnMouseMoveでの座標を代用して使ってますが、マウスの早い動きには正確を欠きます。 何かいい回避方法はありませんでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
お礼
早速お答え頂きありがとうございます。IEとFirefoxで試したところ、うまくズレが出ずマウスポイントと重なって動いてくれました。また、IEとfirefox両方考慮頂きありがとうございます。 これで次のステップへ行けそうです。