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.