Question

I noticed when I use jQuery UI’s draggable feature and I have to drag the element so far up/down the page that it forces a scroll. The element being dragged seems to jump (about) twice as fast as my mouse cursor. This causes very erratic behavior and makes it almost impossible to use.

An example of what I mean can be found here.

http://tinyurl.com/ae6g5qe

I even get this behavior on the sample code on the jQuery UI’s site.

http://jqueryui.com/draggable/#scroll

I have a guess that it is using both the mouse movement AND the window scroll to increase the movement of the element (So twice as much). I’m about to delve into jQuery UI’s code and see if I can find anything, but I’m curious if anyone else has experienced this or if it is just me? Also, if anyone has – have you gotten around it somehow?

Answer 1

This appears to be an open bug in jQuery UI 1.8+. You can see that if you use version 1.7 of jQuery UI the behavior is noticeably better.

Example based on jQuery UI’s draggable demo:

HTML

<div id="draggable" class="ui-widget-content">
    <p>Scroll set to true, default settings</p>
</div>
<div style="height: 5000px; width: 1px;"></div>

JS

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

jsfiddle (using jQuery 1.7.2 and jQuery UI 1.7.3)