Move an element where the user has clicked - Javascript DOM Event

Javascript examples for DOM Event:onclick

  1. HOME
  2. Javascript
  3. DOM Event
  4. onclick

Description

Move an element where the user has clicked

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script type="text/javascript">
function showCoords(evt){/*www  .  j  ava  2  s  .com*/
  document.getElementById("character").style.left = evt.pageX;
  document.getElementById("character").style.top = evt.pageY;
}

      </script> 
   </head> 
   <body onmousedown="showCoords(event)"> 
      <div id="character" style="position: absolute; top: 100px; width: 80px; height: 40px; background:black;">
          Char 
      </div>  
   </body>
</html>

Related Tutorials