Cards overlapping when I drag react-beautiful-dnd about react-beautiful-dnd HOT 3 OPEN

Hey have you found any solution to this issue ? I'm encountering same behaviour even though I used the {provided.placeholder} element which I thought would prevent it.

from react-beautiful-dnd.

Hey have you found any solution to this issue ? I'm encountering same behaviour even though I used the {provided.placeholder} element which I thought would prevent it.

I am using provided placeholders also but they are not working at all. I didn't find any normal solution to prevent it

from react-beautiful-dnd.

It looks like your droppable is set to mode="virtual". The documentation states that you need to provide your own placeholder.

For my use-case, with items that have a variable size, I managed to achieve this by keeping track of the index of the element that was dragged:

const draggedIndex = useRef<number | null>(null);

const handleDragStart: OnDragStartResponder = ({ draggableId, source }) => {
  ...
  draggedIndex.current = source.index
};

And then grabbing a reference to the HTML element currently being dragged from the renderClone method:

renderClone={(provided) => {
  ...
   return (
     <div
       {...provided.draggableProps}
       {...provided.dragHandleProps}
       style={{ ...provided.draggableProps.style, ...style, ...indentationStyle }}
       ref={(el) => {
         provided.innerRef(el);
         draggedElementRef.current = el;
       }}
     >
       ...
     </div>
   );
 }}

And finally inserting a placeholder when rendering the draggable nodes, that has the same height as the element we're dragging:

{items.reduce((acc, { index, measureRef }) => {
  if (draggedIndex.current === index) {
    // We need to manually add a spacer for the dragged element to prevent items in the list from overlapping
    acc.push(<div style={{ height: draggedElementRef.current?.offsetHeight ?? 100 }} />);
  }
  acc.push(renderNode(index));

  return acc;
}, [] as Array<JSX.Element>)}

Hope this helps!

from react-beautiful-dnd.