Vertically Scrollable Dropzone

[AYGTX]

I have two HTML containers: one is for elements to be dragged and dropped and the other is for the dropzone, the first container has a sticky top positioning ( which I suspect causing my issue here ) and the second scrolls ( basically its a pdf that has multiple pages ) , dropped elements do not move when I scroll down the page

Expected behavior

Dropped elements over a scrollable dropzone should maintain their position on the document In other words I'd want to change the css translate values while scrolling if its correct to say here : https://imgur.com/a/oeISyf5

Actual behavior

Dropped elements do not move ignore dropzone scrolling

System configuration

interact.js version: 1.10.17 Browser name and version : Chrome 109.0.5414.74 Operating System: 21H2 W11

[dmboucher]

I also have this issue. Code looks like this...

interact(".schedule_grid_schedule_row") .dropzone({ accept : ".schedule_block", ondragenter: BlockDragEnter });

In the BlockDragEnter() function, e.target is correct until I scroll the container. Once the container scrolls, all e.target objects are incorrect. They were unaware of the change.

Take a look at the gif below. At first, the ids in the block I'm dragging (highlighted in blue) match the ids shown at the beginning of each row. Once I drag down and automatically scroll the container, the values in the block I'm dragging no longer match the row I'm dragging over. This is because the e.target values are incorrect once the container moves.

https://imgur.com/a/oJwycxB

Help would be appreciated. 🙏