Vertically Scrollable Dropzone
AYGTX opened this issue · comments
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
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.
Help would be appreciated. 🙏