jQuery UI，可拖动，可拖放，自动滚动 [英] jQuery UI, Draggable, Droppable, Auto Scroll

问题描述

我有一组可放置的li元素，它们接受可拖动的图标.项目列表位于可滚动的div元素中.我在这里整理了一个简单的示例: http://www.nerdydork.com/demos/dragscroll/

I have a set of droppable li elements that accepts a draggable icon. The list of items is in a scrollable div element. I put together a simple example here: http://www.nerdydork.com/demos/dragscroll/

我想知道在拖动可拖动元素时是否有一种方法可以自动滚动元素列表.例如，假设您位于中间位置，例如 http://www.nerdydork.com/demos/dragscroll/#j .当您接近div的顶部时，它将开始向上滚动；当您接近div的底部时，它将开始向下滚动.

I'm wondering if there is a way to autoscroll the list of elements when you are dragging the draggable element. For example, let's say you are somewhere in the middle, like http://www.nerdydork.com/demos/dragscroll/#j . As you approach the top of the div, it will start scrolling up, as you approach the bottom of the div it will start scrolling down.

任何人都知道如何使用jQuery完成此操作吗?

Anyone know how to accomplish this with jQuery?

更新

我越来越近了.我在上部&上创建了固定div容器div的下部.悬停时，它会使用 http://plugins.jquery.com/project/aautoscroll 开始自动滚动

I'm getting closer. I created fixed div on the upper & lower portions of the container div. When hovering over it starts an autoscroll using http://plugins.jquery.com/project/aautoscroll

现在的问题是，当我将鼠标悬停在下部区域时，它弄乱了我在字母上的可拖动对象.不过，较低的自动滚动区域似乎只是一个问题.

Now the problem is when I hover over the lower area, it messes up my draggable on the letters. It only seems to be a problem with the lower autoscroll area though.

要查看我正在谈论的错误，请观看以下简短视频: http://screencast.com/t/JBFWzhPzGfz

To see the bug I'm talking about, watch this short video: http://screencast.com/t/JBFWzhPzGfz

请注意，当它自动向下滚动时，鼠标悬停在正确的字母上方.在视频结尾处，您可以看到，如果将鼠标悬停在列表的左边缘，则它会以某种方式重置并似乎可以再次使用.

Notice how when it autoscrolls down, the hover is NOT over the right letter. Toward the end of the video you can see that if you hover over the left margin of the list, then it somehow resets and seems to work again.

推荐答案

为可拖动对象设置"refreshPositions:true"选项将导致jQuery重新计算每个鼠标事件的偏移量.那应该可以解决您的问题.

Setting the "refreshPositions: true" option for the draggable will cause jQuery to recalculate the offsets on every mouse event. That should fix your problem.

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