title: Stop jQuery draggable from scrolling off screen
body: <p>When using jQuery UI draggable on a div element you can drag the element "off" the right side of the page, but the page will simply extend and autoscroll with the element. This is problematic as I am trying to initiate an event when the element reaches the right side of the window. One caveat is that I can't simply bound the div so that it cant leave because I want the dragging to stop when your cursor meets the edge not the div (try dragging it off the left side to see what I mean, I simply want to replicate that on the right).</p>
  
  <p><strong>What I've tried:</strong></p>
  
  <p><strong>body{ overflow: hidden;}</strong> - at first glance works, but if you inspect close the body is actually scrolling just not with a visible scrollbar. Plus this is to be used in a plugin so I cant limit users to only overflow: hidden bodys.</p>
  
  <p><strong>Creating wrapper div of window size/fixed position</strong> to trigger events but the body still extends out just under the fixed div.</p>
  
  <p>I just need a way to say if I'm dragging an element, dont scroll the window over.</p>
  
  <p>Here is a jsFiddle that allows dragging but goes off the window:
  <a href="http://jsfiddle.net/9dx1cxu8/">http://jsfiddle.net/9dx1cxu8/</a></p>
  
  <pre><code>html:
  &lt;div class="box"&gt;&lt;/div&gt;
  
  javascript (jQueryUi):
  $('.box').draggable();
  
  css:
  .box{
    left:200px;
    top:200px;
    width: 150px;
    height: 150px;
    box-shadow: inset 0 0 20px
  }
  </code></pre>