search

clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
13.13k stars 651 forks source link

Iframe drag&drop issue #1374

Open MIAOYANZ opened 7 months ago

MIAOYANZ commented 7 months ago

In our front-end, we are now having a function that drag&drop an iframe and with useSortable for it. This function works fine previously, however since this week, the drag turns to be very laggy and not able to drop. To provide more context, the drag&drop is still working for other html tag but only not working for iframe. We haven't update our code/packages/dependency, and the functionality suddenly not working on Chrome, but still working on other browsers(FireFox & Safari). We just started seeing this impact from Mar 25th, but it may be safe to assume this impact started no earlier than one week ago (Mar 18th). We tried to downgrade chrome version but have reproduced in older versions still. Is this a known issue or have anyone encounter this before?

MuhammadHamzaChippa commented 6 months ago

Getting the same problem

p697 commented 5 months ago

same problem

paulm17 commented 4 months ago

Edit:

For my use-case which is a page builder. I've got global state which tracks whether drag is in-flight.

So when I am dragging. I can set the iframe as pointerEvents: none and [the dragging] is unencumbered and smooth.

When the draggable is released, the iframe is set to pointerEvents: all.

What's great, is that the sortable inside the iframe remains unaffected.

p697 commented 4 months ago

I found a feasible solution:

When starting to drag, temporarily adjust the size of the drag button to be very large and cover it over the iframe. This can solve the problem.

dvorakdominik commented 3 months ago

@paulm17, How did you solve scrolling in iframe?

paulm17 commented 3 months ago

@dvorakdominik I don't have a problem with scrolling in iframe

dvorakdominik commented 3 months ago

@paulm17

I mean when the iframe is larger than the viewport height and you need to drag the element inside.

If I set pointer-events: none; then scrolling in iframe doesn't work. But when I have pointer-events: all; drag and drop is unusable.