title: I can drag elements outside the document window, but not outside a simple div. Why?
body: <p>I'm trying to drag things out of my document by capturing the mouse coordinates and moving stuff accordingly. Currently I use document.addEventListener and this works well even if I drag stuff outside the window. The functionality is increasing and to keep up with the complexity I would rather use divs and div1.addEventListener instead.</p>
  
  <p>But this change doesn't let me drag things outside my div, let alone outside my window. I'm talking about dragging only (mouse down inside the div and then dragging the mouse out of it). It brakes down as soon as I'm outside the div.</p>
  
  <p>I don't get what is going on, I experimented with it a long time ago and I remembered this to be working code.</p>
  
  <p><a href="http://jsfiddle.net/VC64T/" rel="nofollow">fiddle here</a></p>
  
  <pre><code>window.onload = function()
  {
      div1 = document.getElementById("div1");
  
      document.addEventListener('mousedown', function(evt){mouseDown(evt, this)}, false);
      document.addEventListener('mousemove', function(evt){mouseMove(evt, this)}, false);
      document.addEventListener('mouseup', function(evt){mouseUp(evt, this)}, false);
  
      // div1.addEventListener('mousedown', function(evt){mouseDown(evt, this)}, false);
      // div1.addEventListener('mousemove', function(evt){mouseMove(evt, this)}, false);
      // div1.addEventListener('mouseup', function(evt){mouseUp(evt, this)}, false);
  }
  
  function mouseMove(evt, caller)
  {
  }
  
  function mouseDown(evt, caller)
  {
  }
  
  function mouseUp(evt, caller)
  {
  }
  </code></pre>