イメージのマウスダウン、マウス移動、マウスアップイベント？

マウスで画像を移動するにはどうすればよいですか？ onmousedownとonmousemoveは正しく処理するイベントですか？イメージのマウスダウン、マウス移動、マウスアップイベント？

<html> 
    <body> 
    <script type="text/javascript"> 
    funcion good() 
    { 
    document.getElementById("omna"); 
    document.getElementById("omna).style.position="absolute"; 
    document.getElementById("omna").style.top=somevalue; 'these keeps changing 
    document.getElementById("omna").style.left=somevalue; ' these keeps changing 
    } 
    </script> 
    <img id="omna" src"/something.jpg" onmousedown="highlight() onmousemove="good()" onmousedown="stop()"> 'not working 
    </body> 
    </html>

mousedownイベントの画像の使用方法はありますか？ mousedownイベント（私は画像上のmousedownを意味します）では、常にmousemoveイベント関数をJavaScriptで実行し、mouseupが発生してもそれは停止する必要があります。 mousemoveイベントを連続してループするにはどうすればよいですか？それを出すことができません。 Googleでいくつかのソリューションを見つけましたが、構文とそのすべてを理解することができませんでした。何とかあなたが同じことを投稿したら、あなたの解決策を教えてください。

申し訳ありません。私のmousedownとmouseventsは機能していません。何人かの人はアンカータグを使用することをお勧めします。なぜmouseeventsが画像のために働いているのですか？

出典

2011-09-14 niko

：

<html> 
    <head> 
    <style> 
     html,body { 
     height:100%; 
     } 
    </style> 


    <script type="text/javascript"> 
     var omnaEl,dragData=null; 
     function window_onload() { 
     omnaEl=document.getElementById("omna") 
     if(window.addEventListener) { 
      omnaEl.addEventListener('mousedown',startDrag,false); 
      document.body.addEventListener('mousemove',drag,false); 
      document.body.addEventListener('mouseup',stopDrag,false); 
     } 
     else if(window.attachEvent) { 
      omnaEl.attachEvent('onmousedown',startDrag); 
      document.body.attachEvent('onmousemove',drag); 
      document.body.attachEvent('onmouseup',stopDrag); 
     } 
     } 


     function startDrag(ev) { 
     if(!dragData) { 
      ev=ev||event; 
      dragData={ 
      x: ev.clientX-omnaEl.offsetLeft, 
      y: ev.clientY-omnaEl.offsetTop 
      }; 
     }; 
     } 
     function drag(ev) { 
     if(dragData) { 
      ev=ev||event; 
      omnaEl.style.left=ev.clientX-dragData.x+"px"; 
      omnaEl.style.top=ev.clientY-dragData.y+"px"; 
     } 
     } 
     function stopDrag(ev) { 
     if(dragData) { 
      ev=ev||event; 
      omnaEl.style.left=ev.clientX-dragData.x+"px"; 
      omnaEl.style.top=ev.clientY-dragData.y+"px"; 
      dragData=null; 
     } 
     } 

    </script> 
    </head> 
    <body onload='window_onload();'> 
    <img id="omna" src="http://t0.gstatic.com/images?q=tbn:ANd9GcRi-8XnnXwAZmz_5R5LHRHMNlnYYHCP4WqRdu6vhf_ru8wLK9XB3IrNrwix" 
     width="100px" height="100px" unselectable="on" style="position:absolute;user-select:none;-moz-user-select:none;-webkit-user-select:none;"/> 
    </body> 
</html>

出典

2011-09-14 07:26:21

はい、これらは右のイベントですが、心に留めておくべきいくつかのこと：

は、マークアップで指定する必要がonmousemoveスタイルのイベントバインディングを使用しないでください。これを読んで、javascriptイベント処理の背景についてもっと知ることができます。
JavaScriptと併用すると、おそらくcssの助けが必要になります。それを取る - すべての重い持ち上げを行うにはjavascriptに依存しないでください。
もしあなたがJavaScriptの経験があれば（言語の振る舞いを知っている）、私はjqueryを使って（イベントバインディング、属性設定などのように）重い作業をすることをお勧めします。

乾杯！このような

出典

2011-09-14 04:20:58 jrharshath

イメージのマウスダウン、マウス移動、マウスアップイベント？

答えて

関連する問題