Example of multiple draggable items

[simemese]

Hi, does anyone have a simple example of multiple draggable items? I am new to React and struggling a bit with making it work with multiple items. Thanks!

[khuezy]

You can reference some examples here: https://github.com/clauderic/dnd-kit/tree/master/stories
From the docs: https://docs.dndkit.com/introduction/getting-started

import {DndContext, useDraggable, useDroppable} from '@dnd-kit/core';

type DndProps = PropsWithChildren & {
  id: string
  data: any
}
function Droppable({id, data, children}: DndProps ) {
  const {setNodeRef} = useDroppable({
    id, data
  });

  return (
    <divref={setNodeRef}  {...listeners} {...attributes}>
      {children}
    </div>
  );
}

function Draggable({id, data, children}: DndProps ) {
  const {attributes, listeners, setNodeRef, transform} = useDraggable({
    id, data
  });
  return (
    <divref={setNodeRef}  {...listeners} {...attributes}>
      {children}
    </div>
  );
}

function App() {
  return (
    <DndContext onDragEnd={handleDragEnd}>
      <Droppable id={'Dropzone a', data={{}}}>Drop A/Droppable>
      <Droppable id={'Dropzone b', data={{}}}>Drop B</Droppable>
      <Droppable id={'Drag A', data={{}}}>Drag A</Droppable>
      <Droppable id={'Drag B', data={{}}}>Drag B</Droppable>
    </DndContext>
  );
  
  function handleDragEnd(event) {
    const {active, over} = event;

  }
}