jQuery UI 的 Draggable 和页面滚动

Posted 2023-05-08

【中文标题】jQuery UI 的 Draggable 和页面滚动

【英文标题】：jQuery UI's Draggable and page scrolling

【发布时间】：2013-01-27 01:37:00

【问题描述】：

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

我的意思的一个例子可以在这里找到。

http://tinyurl.com/ae6g5qe

我什至在 jQuery UI 网站上的示例代码中发现了这种行为。

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

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

【参考方案1】：

这似乎是 jQuery UI 1.8+ 中的 open bug。您可以看到，如果您使用 jQuery UI 1.7 版，则行为明显更好。

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

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）

【讨论】：

谢谢，它在 1.7 中效果更好。我现在开始转换我的页面。

我无法拖动那个东西，在我的安卓浏览器中，它只是滚动主窗口...：\