Interact.js: Issues with dragging and autoScroll

[kongaraju]

Hi taye,

I am facing issues while dragging from overflowing div and auto scroll

please have a look at the fiddle http://jsfiddle.net/whgs9csv/2/

issue 1

I have two overflowing divs with list of draggable elements, elements hiding while dragging. I tried to apply z-index but no use

issue 2

I am setting autoscroll to draggables restricted to topcontainer havinng 400px height
inside the parent container having height 200px

I am able to drag draggables till 200px after that the draggable behavior distorted, there is some gap between mouse and draggable element.

In Demo

try to drag from left panel to right panel you can see the first issue
and
to reproduce second issue try to drag down L1 you can see the gap between mouse pointer and draggable position

[taye]

issue 1

https://github.com/taye/interact.js/issues/184#issuecomment-100538391

issue2

Autoscroll doesn't work very well if the container is not the window. Using position: absolute on the draggables might make it work better.

[vmasto]

@kongaraju hey, did you manage to find a solution to this?

[kongaraju]

@vmasto ,

I am doing cloning to overcome from this issue but with cloning I could not able to achieve autoscrolling functionality.

you can see my approach http://jsfiddle.net/Zyy2N/11/

@taye Could you please help us out, is there any workaround to get autoscrolling with this approach?

[taye]

@kongaraju You can't use a CSS selector as an autoScroll container. It has to be an HTMLElement or Window. That's why autoscroll doesn't work at all in that jsfiddle.

[kongaraju]

thats awesome. its working amazingly. finally I reached the my goal. You are really responsive and helpful, thanks for all your support and suggestions and thanks for giving us wonderful library.

[taye]

You're very welcome!