使用JQuery UI可拖动小部件实现自动滚动 [英] Implementing Auto Scroll with JQuery UI Draggable Widget
问题描述
我正在使用 jQuery UI Draggable小部件.它运行良好，除了我现在需要添加自动滚动.也就是说，在拖动时，我想在鼠标位于窗口顶部或底部时滚动浏览器窗口.
I'm working with the jQuery UI Draggable widget. It's working well except I now need to add auto scroll. That is, while dragging, I want to scroll the browser window when the mouse is at the top or the bottom of the window.
我有很多在C和C ++中从事类似工作的经验.我将设置一个标志来指示拖动操作正在进行中.在鼠标移动消息处理程序中，我将设置一个计时器.在计时器的处理程序中，我将在适当的方向上滚动窗口.当鼠标离开触发"区域时，我将关闭计时器.我会使用计时器，以便即使鼠标不动也可以正常滚动.
I have a lot of experience doing things like this in C and C++. I would set a flag to indicate that a drag operation is underway. In the mouse move message handler, I would set a timer. And in the handler for the timer, I would scroll the window in the appropriate direction. I would shut down the timer when the mouse left the "trigger" area. I'd use a timer so that scrolling was regular even if the mouse was not moving.
谁能提供一些建议，让我开始使用jQuery和Draggable小部件进行此操作?有鼠标移动处理程序吗?我能说出鼠标是在窗口的顶部还是底部?我可以滚动浏览器窗口吗?那计时器问题呢?一种想法是为触发"区域显示一些覆盖，但是我的jQuery技能有所限制.或者，更好的是，我确定有人已经做过这样的事情.有例子吗?
Can anyone offer some suggestions on how I'd get started with this using jQuery and the Draggable widget? Is there a mouse move handler? Can I tell if the mouse is at the top or bottom of the window? And can I scroll the browser window? And what about the timer issues? One thought is to display some overlays for the "trigger" areas, but my jQuery skills are somewhat limited. Or, better yet, I'm sure someone has done something like this already. Any examples?
注意:可拖动"小部件支持自动滚动，但是它滚动了容器元素.我需要滚动浏览器窗口.
编辑
我尝试将包含"选项设置为文档"，但效果不明显.
I tried setting the Containment option to "document" but it had no noticeable effect.
$('.drag-handle').draggable({
axis: "y",
containment: "document",
scroll: true,
helper: buildHelper
});
推荐答案
基本上，它正在使用您的代码: http: //jsfiddle.net/DgzAH ，但用户必须始终略微移动鼠标才能激活自动滚动.
Basically, it is working with your code: http://jsfiddle.net/DgzAH but the user must always slightly move the mouse to activate the auto-scroll.
几个月前，我编写了一些有关此代码的代码，以便在拖动元素而不移动鼠标时滚动div:
I wrote some code about that some months ago to scroll a div when element is dragging without moving mouse:
这个想法是检查拖动的元素位置，并在拖动事件位置位于我的div边框的70px处时创建一个setInterval函数.在您的情况下，页面包装器或直接为body: http://jsfiddle.net/pPn3v/22 /
The idea is to check the dragged element location and create a setInterval function when the drag event position is located at 70px of the border of my div. In your case, the page wrapper or directly the body : http://jsfiddle.net/pPn3v/22/
这篇关于使用JQuery UI可拖动小部件实现自动滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
