title: Make jQuery-ui draggable handle cover entire page
body: <p>What would be the best way to make an element draggable when clicking anywhere in the window?</p>
  
  <p>Would I have to use a container <code>&lt;div&gt;</code> that covers the whole window?</p>
  
  <p>I tried making the <code>body</code> draggable but that didn't work.</p>
  
  <p>The problem with using a container <code>&lt;div&gt;</code> is that it moves and therefore doesn't cover the whole of the screen any more after it has been dragged.</p>
  
  <p>What about making a really vast container <code>&lt;div&gt;</code> that spans a large number of pixels in every direction so you would never get to the edge of it. Is that a bad idea?</p>
  
  <p>The idea (simplified) is to have a page with a square in the middle that can be dragged by dragging any part of the window.</p>
  
  <p>Here's a wonderfully unnecessary mockup :)</p>
  
  <p><a href="https://i.stack.imgur.com/xMTzm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xMTzm.png" alt="alt text"></a>
  </p>
  
  <p>I'm trying with a full screen div, but when I reset it, the element within it moves back with it.. <a href="http://jsfiddle.net/LUFf6/" rel="nofollow noreferrer">http://jsfiddle.net/LUFf6/</a></p>