jQuery UI的可拖动和页面滚动 [英] jQuery UI's Draggable and page scrolling

问题描述

我注意到当我使用jQuery UI的可拖动功能时，我必须将元素向上/向下拖动到页面上，它强制滚动。被拖动的元素似乎比我的鼠标光标跳跃（大约）两倍。这会导致非常不稳定的行为，并且几乎不可能使用。

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

我甚至在jQuery UI网站上的示例代码中得到了这种行为。

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

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

我猜测它正在同时使用鼠标移动并且窗口滚动以增加元素的移动（因此两倍）。我即将深入研究jQuery UI的代码，看看我是否能找到任何东西，但我很好奇是否有其他人经历过这个或者它只是我？此外，如果有人 - 你以某种方式解决了它？

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?

推荐答案

这似乎是一个打开错误。你可以看到，如果你使用1.7版本的jQuery UI，行为明显更好。

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.

基于jQuery UI可拖动演示的示例：

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 （使用jQuery 1.7.2和jQuery UI 1.7.3）

jsfiddle (using jQuery 1.7.2 and jQuery UI 1.7.3)

这篇关于jQuery UI的可拖动和页面滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！