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?

推荐答案

这似乎是jQuery中的打开错误 UI 1.8以上.您会看到，如果使用jQuery UI 1.7版，则其行为会明显好一些.

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屋！