title: javascript use drag to move element
body: <p>How does one set the position of an element? When the user drags an element (an image), I'd like to have it move synchronously. I see that my "mousemove" handler is being called. However I cannot get the element to actually move.</p>
  
  <p>Here's the mousemove handler (the element being dragged is "overlay"):</p>
  
  <pre><code>function handleMouseMove (event)
  {
    var deltaX = event.movementX;
    var deltaY = event.movementY;
  
    var divOverlay = document.getElementById ("overlay");
    var rect = divOverlay.getBoundingClientRect();
  
    divOverlay.style.left = rect.x + deltaX;
    divOverlay.style.top = rect.y + deltaY;
  }
  </code></pre>
  
  <p>Here's the html for "overlay":</p>
  
  <pre><code>&lt;div id="overlay"&gt;
    ... some other stuff ...
    &lt;img id="large" src="something.jpg" &gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>#overlay {position:absolute; left:0; top:0}
  </code></pre>
  
  <p>It appears that the default drag action manifests, which is a shadow of "overlay" that moves with the mouse. But the element itself does not move.</p>