Jquery UI Sortable，Scrolling（jsFiddle示例） [英] Jquery UI Sortable, Scrolling (jsFiddle Example)

问题描述

我想弄清楚当我拖动列表元素时，如何滚动我的'可排序列表'。

I am trying to figure out how to get my 'sortable lists' to scroll while I am dragging a list element.

滚动在列表中正常工作从拖动 ，但不在我将其拖动到的列表中。

The scroll works fine in the list I am dragging from but not in the list I am dragging to.

http://jsfiddle.net/jordanbaucke/pacbC/1/

另一个问题类似的问题：

jQuery可排序容器滚动div与溢出自动

Pivotaltracker， www.pivotaltracker.com 做得很好。

PS. Pivotaltracker, www.pivotaltracker.com does this well.

推荐答案

老问题，但我今天努力了几个小时，所以我想我会分享我的学习。

Old question, but I struggled with this for a few hours today so I figured I'd share what I learned.

可排序滚动是scrollParent的偏移，当前滚动位置，当前项位置和scrollSensitivity的函数。可排序在开始拖动时执行_mouseStart。这将设置scrollParent并缓存当前排序的偏移量。有了这个知识，我们可以在over事件处理程序中做一个小的shuffle：

Sortable scrolling is a function of the scrollParent's offset, its current scroll position, the current item position, and the scrollSensitivity. The sortable executes _mouseStart when you start dragging. This sets the scrollParent and caches its offset for the current sort. Armed with this knowledge, we can do a small shuffle in the over event handler:

over: function (event, ui) {
    ui.item.data('sortableItem').scrollParent = ui.placeholder.parent();
    ui.item.data('sortableItem').overflowOffset = ui.placeholder.parent().offset();
}

当拖动的元素更改容器时触发。当您点击over事件时，占位符已移动到新容器。代码获取新的scrollParent并重新获取偏移量。

Over fires when the dragged element changes containers. The placeholder has already moved to the new container when you hit the over event. The code gets the new scrollParent and recaches the offset.

为了简洁起见，我为Tats_innit的小提示：http://jsfiddle.net/3E2Hg/84/

I forked Tats_innit's fiddle for brevity's sake: http://jsfiddle.net/3E2Hg/84/

scrollParent在整个事件结构的其他地方被引用，因此我不会确保这是防弹。不过，我认为这是一个很好的起点。如果我遇到任何困难，我会更新这个答案。

The scrollParent gets referenced in other places throughout the event structure so I'm not sure this is bulletproof. Still, I think this is a good starting point. If I encounter any gotchas, I'll update this answer.

这篇关于Jquery UI Sortable，Scrolling（jsFiddle示例）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！