拖动时自动滚动可放置div [英] Automatically scroll droppable div whilst dragging

问题描述

在这个小提琴中: http://jsfiddle.net/adrianjsfiddlenetuser/zyUkd/76/

可以拖放不具有粉红色背景色的按钮.

The buttons which do not a have pink background color can be dragged/dropped.

问题是当尝试将可拖动div添加到列表末尾时，在div拖动到div之间时，im不会自动向下滚动.

The problem is when dragging between the div's the div im dragging to does not automatically scroll down when trying to add the draggable div to end of list.

如何在拖动时自动(水平/垂直)滚动div?

How can I automatically scroll the div(horizontally/vertically) im dragging to?

推荐答案

工作演示 http: //jsfiddle.net/X3rKJ/ 或 http://jsfiddle. net/X3rKJ/1/

添加on滚动事件，每次将其拖动到第二格时，它都会识别事件并滚动.

Add on scroll event and every time when you drag it to second div it identifies the event and scroll.

这将有所帮助. :)欢呼

This will help. :) cheers

请注意 on事件绑定到该对象，即当列表变得高度不相等时用户从其拖动的div.解决方案可以是:拖动它到div，然后将其滚动到底部或可能与此对象一起玩，并始终选择更大的容器作为滚动参考，尽管如此，还是为评论而欢呼. :)作为-1候选者的解决方案，还不错，但都不错. anyhoo，:(

Please note The on event gets bind to the this object i.e. the div from where the user drags when the list become unequal height solution can be: Drag it to the div and then scroll it to bottom or possibly playing around with this object and always choosing the bigger container as a scroll reference, cheers for the comment though. :) Its not that bad as a solution for -1 as a candidate but all good. anyhoo, :(

此解决方案效果很好，要处理div jsut的高度不相等，需要添加一条语句，如果2 div的高度不相等，则以较大的作为scroll的基础引用.

This solution is working fine, to deal with unequal height of the div jsut need to add a statement that if 2 div's are unequal height take the larger as the base reference to scroll.

代码

var sortlists = $(".connected").sortable({
     connectWith : ".connected",
     items       : ".myDivs:not(.excludeThisCss)",
     tolerance   : 'pointer',
     revert      : 'invalid',
     forceHelperSize: true

}).on('scroll', function() {
     sortlists.scrollTop($(this).scrollTop());
}).disableSelection();;


​

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