title: Move an image with Javascript using mouse events
body: <p>This should be simple enough, but every time I try I end up with a different issue.</p>
  
  <p>I am trying to move an image around the screen using mouse events such as mousedown, mouseup, mousemove, clientX and clientY.  I am then trying to apply it to the image using absolute positioning.</p>
  
  <p>I thought the below code would work as I get the coordinates on the initial click, and then the idea was to update them with mouse movement, but this does not work.</p>
  
  <pre><code>var image;
  var dog = document.getElementById("dogPic");
  var cat = document.getElementById("catPic");
  
  dog.addEventListener("mousedown", initialClick, false);
  cat.addEventListener("mousedown", initialClick, false);
  
  
  
  
  function initialClick(e) {
      var initialX = e.clientX;
      var initialY = e.clientY;
      image = document.getElementById(this.id);
  
      document.addEventListener("mousemove", function(e){
  
          var newX = e.clientX - initialX;
          var newY = e.clientY - initialY;  
  
  
          image.style.left = newX;
          image.style.top = newY;
      }, false);
  
  }
  </code></pre>
  
  <p>I am not asking for a complete answer, but can anyone direct me as to how I can approach dragging an image around the screen using the mouse movement events?</p>
  
  <p>Thanks</p>