Geek Answers Handbook

Mouse down, mouse movement and mouse event for image?

How to move the image with the mouse? onmousedown and onmousemove the right events?

  <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>

How to use mousedown event on image? and with the mousedown event (I mean mousedown in the image), it should constantly run the mousemove event mousemove in JavaScript, and when mouseup even occurs, it should stop. How do I go through the mousemove event mousemove ? unable to figure it out. I found some solutions on google but couldn’t understand the syntax and that’s it. If one way or another you publish the same, explain your decision to me.

Sorry, forgot to say that my mousedown and mousevents not working. Some people suggest using an anchor tag to make it good? and why do mouseevents work for an image?

+4
source share
2 answers

like this:

 <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>
+7
source

Yes, these are the right events, but there are a few things to keep in mind:

  • Do not use onmousemove style event bindings that should be specified in the markup. Read this for more information on handling javascript events.
  • Combined with javascript, you will most likely need css help. Take this - don't rely on javascript to do all the heavy lifting.
  • If you are familiar with javascript (you know how the language behaves), then I suggest you use jquery to do the hard work (like event binding, setting an attribute, etc.) - this will make your code more concise.

Hooray!

+1
source

More articles:


All Articles