title: Disable scrolling with draggable div
body: <p>I have a div which is draggable. When I drag it close to one of the edges on the webpage the whole website scroll. Can I disable this function? 
  (I can basically use the div to move around the webpage, but I want it to be limited to where I'm currently at)
  I use the jquery draggable script!</p>
  
  <p>The header:</p>
  
  <pre><code>link href="stilmallaudioplayer.css" rel="stylesheet"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  &lt;/style&gt;
  &lt;script&gt;
  $(function() {
  $( "#audioplayer" ).draggable();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The body:</p>
  
  <pre><code>&lt;div id="audioplayer" class="ui-widget-content"&gt;
  &lt;audio controls class="ui-widget-content"&gt;
  &lt;source src="horse.ogg" type="audio/ogg"&gt;
  &lt;source src="horse.mp3" type="audio/mpeg"&gt;
  Your browser does not support the audio element.
  &lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note: this is not my full code, just the draggable div part!</p>
  
  <p>The css:</p>
  
  <pre><code>#audioplayer { 
      padding: 0.5em; 
      z-index: 3;
      position: absolute;
      top: 100px;
      left: 100px;
  }
  </code></pre>