Question

我正在使用jQuery UI Draggable widget。它运行良好，除了我现在需要添加自动滚动。也就是说，在拖动时，我想在鼠标位于窗口的顶部或底部时滚动浏览器窗口。

我在C和C ++中有很多经验。我会设置一个标志来指示拖动操作正在进行中。在鼠标移动消息处理程序中，我会设置一个计时器。在计时器的处理程序中，我会在适当的方向滚动窗口。当鼠标离开“触发”区域时，我会关闭计时器。我会使用一个计时器，这样即使鼠标没有移动，滚动仍然是正常的。

有人可以提供一些关于如何使用jQuery和Draggable小部件开始使用它的建议吗？有鼠标移动处理程序吗？我可以判断鼠标是在窗口的顶部还是底部？我可以滚动浏览器窗口吗？计时器问题怎么样？一个想法是为“触发”区域显示一些叠加，但我的jQuery技能有些限制。或者，更好的是，我确信有人已经做过类似的事了。有什么例子吗？

注意：Draggable小部件支持自动滚动，但它会滚动容器元素。我需要滚动浏览器窗口。

修改

我尝试将Containment选项设置为“document”，但没有明显的效果。

$('.drag-handle').draggable({ 
  axis: "y",
  containment: "document",
  scroll: true,
  helper: buildHelper
});

Answer 1

基本上，它正在使用您的代码：http://jsfiddle.net/DgzAH但用户必须始终稍微移动鼠标才能激活自动滚动。

几个月前我写了一些代码，在没有移动鼠标的情况下拖动元素时滚动div：

Scroll div when element is dragging without moving mouse

当拖动事件位置位于我的setInterval边框的70px时，我们的想法是检查拖动的元素位置并创建div函数。在您的情况下，页面包装器或直接body：http://jsfiddle.net/pPn3v/22/

使用JQuery UI Draggable Widget实现Auto Scroll

1 个答案: