React Beautiful DND Override Z Index When Dragging

In React Beautiful DND, you can override the zIndex property when an item is being dragged by adding a style property to the provided.draggableProps object inside the <Draggable> component. Setting the zIndex to 0 in this style will ensure that the dragged item has a lower zIndex value compared to other elements, which can be useful for controlling the stacking order during the drag operation. Here’s the code snippet you provided with the relevant line highlighted:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<Draggable
    key={link.id}
    draggableId={link.id}
    index={index}
>
    {(provided) => (
        <div
            ref={provided.innerRef}
            {...provided.draggableProps}
            id={`link-${index}`}
            **style={{ ...provided.draggableProps.style, zIndex: 0 }}**
        >
            {/* ... */}
        </div>
    )}
</Draggable>

By adding style={{ ...provided.draggableProps.style, zIndex: 0 }}, you’re ensuring that the zIndex of the dragged element is set to 0 during the drag operation. You can adjust the zIndex value as needed to control the stacking order relative to other elements on your page.

This technique is useful when you want to control the visual appearance of the dragged item and its stacking order during drag and drop operations within your React Beautiful DND application.