jquery-ui draggable scroll bug

If you drag the box so that the parent scrolls you will see that as it scrolls the box moves away from the cursor by the amount of the scrolling. The box will stay that distance from the cursor until more scrolling occurs.

by Jarrod Ribble

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div style="width:500px; height: 500px; overflow: scroll;">
    <div style="width: 4000px; height: 2000px;">
        <div id="draggable" class="ui-widget-content">
            <p>Drag me around</p>
        </div>
    </div>
</div>

CSS

#draggable { width: 150px; height: 150px; padding: 0.5em; }

JavaScript

$(function() {
    $( "#draggable" ).draggable({
        scroll: true
    });
});