Difficulties to implement DragableOverlay

[laurent512]

Hello,

First of all thank you for the interesting library, It seems to be very powerfull.
As background information, I am a hobbyist dev, with NextJS and Tailwind.

I followed the Sortable part of the documentation without too many difficulties until the DragOverlay chapter at its very end. My questions are related to it :

1. Why is it said that adding is necessary to render a Drag Overlay ? Without it, I could see as well a drag overlay when I was dragging an element. This is quite confusing to me.

2. Why "enabling DragOverlay allows to show a preview of where the draggable source will be when dropped" ?
   It is not clear to me how these elements are related.

3. In the last part of Sortable#dragoverlay, the SortableItem.jsx code example contains these lines : <Item ref={setNodeRef} style={style} {...attributes} {...listeners}> {value} </Item>, where does{value}comes from ? What is it supposed to be ?

4. Are there pro/cons for choosing wrapper node or ref forwarding pattern? I am not familiar with any of these. If there is some easy to understand documentation available (inside or outside dnd-kit) I would appreciate it.

5. After playing around and trying I have these 3 pieces of code

export const Item = forwardRef(({ children, id, ...props }, ref) => {
  return (
    <div {...props} ref={ref}>
      <div className="bg-slate-500 h-16 w-44">Task : {id} </div>
    </div>
  );
});

export function SortableItem(props) {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: props.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  return (
    <Item ref={setNodeRef} id={props.id} style={style} {...attributes} {...listeners}>
      {/* {value} // this is mentionned in the documentation but not sure what should be there */}
    </Item>
  );
}

export default function Home() {
  const [items, setItems] = useState(["1", "2", "3"]);
  const [activeId, setActiveId] = useState(null);
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  return (
    <main className="text-neutral-200">
      <Title />
      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
        <SortableContext items={items} strategy={verticalListSortingStrategy}>
          {items.map((id) => (
            <div className="py-4" key={id}>
              <SortableItem id={id} />
            </div>
          ))}
        </SortableContext>
        <DragOverlay>{activeId ? <Item id={activeId} /> : null}</DragOverlay>
      </DndContext>
    </main>
  );

  function handleDragStart(event: any) {
    const { active } = event;

    setActiveId(active.id);
  }

  function handleDragEnd(event: any) {
    const { active, over } = event;

    if (active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.indexOf(active.id);
        const newIndex = items.indexOf(over.id);

        return arrayMove(items, oldIndex, newIndex);
      });
    }

    setActiveId(null);
  }
}

Sadly, it is not similar to some examples I could see in the story book. Example : video
When drop the task, the preview suddenly disapear. Also, could you explain how to customise the preview element ? This is well made in the story book.

Also, I would be interested to know how to smoothly increase the size of the dragged element when it is dragged.

Thank you so much for reading my (many) questions, hope that you will be able to help :) .