Content of an item is not showing while dragging it

[nikkizol]

I have widgets which are react components wrapped in SortableItem, and one of the widget is a map and when I am dragging this widget the map is not showing, but when I drag another widget all works.. any ideas?

Untitled.mov

[ValentinH]

Do you know what kind of element it is? It's probably an iframe and this might require special handling in the library.

[nikkizol]

It's a mapbox layer - deckgl... With other libraries like: react beautiful dnd and dnd kit works well - but there I have other issues like grid layout and z-index.. But this library looks pretty good except this issue and scroll bar..

[ValentinH]

Yes so there is definitely a fix possible. Could you create a codesandbox showing the issue please?

Also what's the scrollbar issue?

[nikkizol]

here is the link - https://codesandbox.io/s/deckgl-1-forked-hh1ri?file=/src/Deckgl.js
it looks ugly, but at least you can try it

[ValentinH]

I just checked and the map is actually rendered using a canvas. This issue is weird because #21 purpose was actually to support copying the canvas content during drag. I'm wondering if there is a "feature" in mapbox-GL to prevent copying the canvas context 🤔

[alonzuman]

Yo check to see the z-index of the item you're dragging,this just happened to me and i noticed that when dragging,the z index was low and it was hiding behind the container element

[ValentinH]

I just checked and unfortunately, it's not this issue here. 🙈 Thanks for the suggestion!

[shivam044]

I just added z-index of '9999'
to the items and now the contents are visible while dragging.