Elements opacity is not being reset with multiple Draggable elements about dnd-kit

[clauderic]

Gotcha. That's a fair use-case.

For the time being, you'd need knowledge of what type of overlay the associated active draggable id is associated to. For now, you could do something like this: https://codesandbox.io/s/affectionate-carson-b9jif

In future versions of @dnd-kit, it will be possible to add metadata for your draggable elements to make this easier.

[clauderic]

Hey @sscaff1, currently the <DragOverlay> component assumes that there are no more than one defined per <DndContext> provider. Try lifting the state up outside of your draggable components.

https://codesandbox.io/s/focused-thompson-5cxqv?file=/src/App.js

Having more than a single <DragOverlay> component may be something that is supported in the future, but no immediate plans around this as use-cases seem limited.

I'm not familiar with the specifics of what the use-case you're building are, but my general advice would be that rendering the <DragOverlay> component within the same component where you use useDraggable is not a good idea.

The rationale being that if your draggable component is reparented, the drop animation will not work since your draggable component will unmount and re-mount (which will also cause the <DragOverlay> component to unmount and re-mount). Further, if your draggable component is unmounted while dragging, for example, if it is reparented onDragOver, the <DragOverlay> component will also unmount and re-mount, which could lead to unexpected results.

[sscaff1]

Thanks for explaining this. I want to render a different element depending in the DragOverlay on the type of the draggable. I'm guessing; however, I can just use over and active to do that.