Geek asks and answers

JQuery UI Draggable and Page Scrolling

I noticed when I use the jQuery UI draggable function, and I need to drag an element so far up / down the page that it forces a scroll. The draggable element seems to jump (approximately) twice as fast as my mouse cursor. This causes very erratic behavior and is almost impossible to use.

An example of what I mean can be found here.

http://tinyurl.com/ae6g5qe

I even get this behavior from sample code on the jQuery user interface site.

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

I assume that it uses both mouse movement and window scrolling to increase the movement of the element (twice as much). I'm going to delve into the jQuery user interface code and see if I can find anything, but I'm curious if someone else has experienced this or is it just me? Also, if someone has one - did you somehow get around it?

+5
source share
1 answer

This seems to be a bug in jQuery UI 1.8+. You can see that if you use jQuery UI version 1.7, the behavior is noticeably better.

Example based on jQuery UI 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)

+6
source

More articles:


All Articles