title: jQuery draggable shows helper in wrong place after page scrolled
body: <p>I'm using jQuery <a href="https://jqueryui.com/draggable/" rel="noreferrer">draggable</a> and <a href="https://jqueryui.com/droppable/" rel="noreferrer">droppable</a> for a work-planning system I'm developing. Users drag jobs to a different day or user, and then data is updated using an ajax call.</p>
  
  <p>Everything works fine, except when I scroll down the main page (Jobs appear on a large week planner that exceeds the bottom of my browser window). If I try and drag a draggable element here, the element appears above my mouse cursor the same amount of pixels as I've scrolled down.. The hover state still works fine and the functionality is bang on but it doesn't look right. </p>
  
  <p>I'm using jQuery 1.6.0 and jQuery UI 1.8.12.</p>
  
  <p>I'm sure there's a offset function I need to add but I don't know where to apply it, or if there's a better way. Here's my <code>.draggable()</code> initialisation code:</p>
  
  <pre><code>$('.job').draggable({
    zIndex: 20,
    revert: 'invalid',
    helper: 'original',
    distance: 30,
    refreshPositions: true,
  });
  </code></pre>
  
  <p>Any idea what I can do to fix this?</p>