Scroll page after reaching end of visible area.

[glook]

Hello, i have a list with elements whitch i want to sort. But when i drag element and reach end of visible area (but not of the list) my window doesn't scroll. It's sad.

[a5hik]

I feel Scrolling is something that can be controlled via the Container Context. Please see my reply also for Issue #9 .

Thanks,
Ashik

[Saravananscope]

see in this video they are showing a scrollbar because the rows exceeds the screen height. in this case how can we drag a first element to the last position (i mean dragging the first row and drop it as last row )

is there any solution?

[vamsigogineni]

Anybody have any working solution to overcome this problem ?
Thanks in advance for your help.

Thanks,
Vamsi.

[aoakeson]

I am running into the same issue, I was going to try to hack a way to get this to work - But if someone has a solution for this, it would be greatly appreciated.

[aoakeson]

@vamsigogineni Here is a quick and dirty fix that worked for me. You may need to change the values to fit your app. Hopefully we can get something like this implemented in the library:

In the dragMove() function, line 780 I added the following code:

if (targetY > $window.innerHeight) {
$window.scrollBy(0, 10);
}
if (targetY < 10) {
$window.scrollBy(0, -10);
}

[glook]

@aoakeson Thank you for your dirty fix, it works!

[vamsigogineni]

@aoakeson , Thanks for your fix.
I have two scroll bars , one for the container and one for the window.
For now, i just need to make the container scroll working. For me, the above solution may not work.

[DonaldMcInnes]

@vamsigogineni Probably way too late, but a quick and dirty fix (based on @aoakeson's above) for container scroll that worked for me was:

if (targetY > scrollableContainer.clientHeight) {
scrollableContainer.scrollTop = scrollableContainer.scrollTop + 10;
}
if (targetY < scrollableContainer.clientTop) {
scrollableContainer.scrollTop = scrollableContainer.scrollTop - 10;
}

I also found I had to change the pos.offsetY in positionStarted (line 142 in my version of ng-sortable) as it got set outside the dragged object after scrolling down - initially I changed it to pos.offsetY = target[0].clientHeight / 2 but I found that caused problems with dragging large objects to the top of the list when it was scrolled down, so I ended up just setting it to pos.offsetY = 20.

[stripathix]

You can expose eventObject in ng-sortable.js file line : 778
like this
scope.sortableScope.$apply(function () {
scope.callbacks.dragMove(itemPosition, containment, eventObj);
});

Then in dragMove callback function in your controller you can handle scrolling easily depending on the container you want
Ex:
dragMove: function (itemPosition, containment, eventObj) {
if (eventObj) {
var targetY,
contatiner = document.getElementById("left-content"),
targetY = eventObj.pageY - ($window.pageYOffset || $document[0].documentElement.scrollTop);
if (targetY < contatiner.top) {
contatiner.scrollTop = contatiner.scrollTop - Configuration.ScrollSpeed;
} else if (targetY > contatiner.bottom) {
contatiner.scrollTop = contatiner.scrollTop + Configuration.ScrollSpeed;
}
}
}

[DonaldMcInnes]

Many thanks @stripathix - that's a much better solution than my quick fix.

[sunishsheth2009]

Any idea as to when will be the newer version with this bug fix be released?

[a5hik]

Now the draMove exposes the eventObj with release version 1.2.3, hence closing this.
also updated the readme.

[thewizarodofoz]

Although this is rather old, I suggest my autoscroll snippet which uses setInterval to achieve continuos scrolling while dragged object is outside viewable area:

dragMove: function(itemPosition, containment, eventObj) {
                var below = eventObj.clientY > $window.innerHeight;
                var above = eventObj.clientY < 35;
                if (below || above) {
                    if (!interval) {
                        interval = $window.setInterval(function(){
                            $window.scrollBy(0, below ? 20 : -20);
                        },25);
                    }
                } else {
                    $window.clearInterval(interval);
                    interval = null;
                }
            }

*35 is the vertical offset I needed (the distance between top of the page to the dragging handle)

[smruthiMallavalli]

Hi a5hik we are using ng-sortable in our project we re getting above problem unable to Scroll page after reaching end of visible area.we have tried solutions provided here still unable to solve the issue.according o yourr comment Pushing support for issue #13. we are not using source folder.we are using dist folder.Do we need to use source folder to solve the scroll bar issue?could you please answer.thanks in advance waiting for your reply....

[smruthiMallavalli]

In this blog you have provided solution for above mentioned problem.these changes not in dist folder yet we are using ng-sortable component, as a bower dependency so whenever we execute bower install it will update the dist folder but since this solution not yet dist folder we are unable to use it.
could you please let us know when u going to publish these changes into dist folder?

[JohnnyToumieh]

When I'm trying @stripathix 's solution on line 514, I'm getting: "$window is not defined".
Been trying to solve this scrolling issue for a while now and it's driving me insane...

EDIT: Solved it!! Remove:

else if (element.y >= bounds.height + bounds.top - this.offset(element).height) {
              element.y = bounds.height + bounds.top - this.offset(element).height;
            }

from movePosition function

[AgNm]

@thewizarodofoz what is the value of interval?