react-easy-sort Content of an item is not showing while dragging it

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?

https://user-images.githubusercontent.com/45672257/141593385-b79dd6bb-829f-4769-af39-efba667ff429.mov

Nov 12 '21 23:11 nikkizol

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

Nov 13 '21 07:11 ValentinH

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..

Nov 13 '21 08:11 nikkizol

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

Also what's the scrollbar issue?

Nov 13 '21 09:11 ValentinH

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

Nov 13 '21 11:11 nikkizol

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 🤔

Nov 15 '21 16:11 ValentinH

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

Oct 22 '22 17:10 alonzuman

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

Oct 24 '22 08:10 ValentinH

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

Apr 27 '23 10:04 shivam044