title: Javascript movable div - keep mousedown from interacting with rest of text on page while div moving
body: <p>I am trying to make a moveable div. I know it is a one liner with jQuery, but I don't want to add the 100k+ for this one feature. What I have below works except that when the div moves the rest of the text on the page acts as though the mouse is down and dragging over it (which of course it is) and so the text becomes highlighted or un-highlighted as the mouse moves. Are there any relatively "easy" pure javascript solutions to this?</p>
  
  <p>BTW: thanks to <a href="https://stackoverflow.com/questions/9334084/moveable-draggable-div-using-javascript?rq=1">jnoreiga</a> for this code.</p>
  
  <pre><code>window.onload = addListeners;
  
  function addListeners(){
      document.getElementById('moveme').addEventListener('mousedown', mouseDown, false);
      window.addEventListener('mouseup', mouseUp, false);
  }
  
  function mouseUp()
  {
      window.removeEventListener('mousemove', divMove, true);
  }
  
  function mouseDown(e){
    window.addEventListener('mousemove', divMove, true);
  }
  
  function divMove(e){
      var div = document.getElementById('moveme');
    div.style.position = 'absolute';
    div.style.top = e.clientY + 'px';
    div.style.left = e.clientX + 'px';
  }
  </code></pre>
  
  <p>And some test html</p>
  
  <pre><code>    &lt;div id="moveme" style="width:100px; background-color:red"&gt;Test&lt;br&gt;&lt;br&gt;Some more text&lt;/div&gt;
  
      &lt;div style="position:absolute; top:100px; left:50px;"&gt;
      &lt;h1&gt;Curriculum&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Math&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Geometry&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Physics&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>