Interact.js: Drop object is offset when drop are is autoscrolled

[CJX3M]

I'm working on something of a scheduler, using your interact plugin, which has proven to be amazing so far. Tricky to use, could use some better documentation on the grid system, but awesome nonetheless

Recently, I came to the issue where my scheduler can grow quite a lot, not even fitting on the screen. So I set myself to use the autoscroll feature, which works nicely, but I'm having an issue where the dropzone to be dropped is off from where the cursor is pointing as shown in the image

Any idea on how to fix this?

This is my autoscroll configuration

// enable autoScroll
                autoScroll: {
                    enabled: true,
                    container: $(".scheduleGrid"),
                    margin: 30,
                    distance: 5,
                    interval: 10
                },

scheduleGrid is the div that contains the table, and each table cell is a dropzone. I wasn't able to implement the grid snap as I intended so I decided to make each cell of the table a dropzone and once dropped adjust the drop element to the size and location of the cell

Regards

Edit: Here's a fiddle that shows the issue in work. Just click on add element to add a dragabble element and drag it over the edge so it can autoscroll. You'll notice that the place to drop it highlight is way back from where the pointer is.

http://jsfiddle.net/CJLopez/uwwfud3p/embedded/result/dark/

[dpekkle]

Call interact.dynamicDrop(true);

http://jsfiddle.net/uwwfud3p/14/

That will fix your issue.

Scrolling still probably won't work how you want though since elements positioned absolutely, and thus dropped elements will not retain their drop zone position when you scroll.

Found your solution here: https://github.com/taye/interact.js/issues/199

[CJX3M]

AWESOME!!!!!

Thanks!!!

This is what I needed!!!

Now, I just need to update the drop element position after an scroll. I'm no longer working with absolute element, but a static one, setting the webTransform css property as the cursor moves, and it's not being updated when the scroll occurs, but will figure how to solve this

Thanks!!!!!!