Multiple draggable elements with React dnd-kit?

[AndrewRayCode]

The docs don't seem to have an example for the overwhelmingly most common use case of a drag and drop library: Multiple draggable items. useDraggable() takes in an id and you can't call hooks in a loop. What is the intended method for creating multiple draggable elements?

Example: I have a component that renders a list of items, and I want each item to be draggable

{elements.map((element) => (<div key={element.id}>my draggable element</div>)}

I've searched for "dnd kit multiple draggable" but the only questions seem to be about sortable, not draggable.

[CodyBontecou]

I'm curious about this as well. Seems odd there isn't an example around.

[AndrewRayCode]

I believe the unspoken way is to abstract out a separate draggable wrapper component you create by hand that calls useDraggable manually. That's implied/hidden in the docs here: https://docs.dndkit.com/api-documentation/draggable/drag-overlay#presentational-components

Some thoughts:

1. I was searching for "multiple" around the docs and didn't find anything, which slowed down my ability to do this.
2. The "drag overlay" page is not an obvious page to go to to discover this pattern
3. This library does not expose a standard <draggable> wrapper component

For 1 and 2, that might be a nice doc update. For 3, I don't know enough about this library to know if that fits with the design principles.

[CodyBontecou]

Hmm, could you provide a small example?

[volodymyrdn]

Hi there! I am having the same problem here. Till now, I was "simulating" it in such a way, that I was still dragging only one item, but on DragEnd I was moving all selected items from source list to the target. My problem here is that both, source list and target list, need to have acccess to the list of selected items, which is stored in the state, and which is not what I want to have. I would like to store selected items in dragged object (active), but with no luck till now. Any ideas, please?

[ssalka]

Not sure if this is an appropriate solution or breaks anything, but I've been keeping track of a set of selected items, and when that list is non-empty, I replace the id passed to useDraggable for each of those items with the same value. This causes them all to move in unison when one of them is dragged.

But I sorta feel like I'm abusing the API by doing this, it's probably not recommended to have multiple items with the same ID.

[Kingwl]

It's will cause some conflict because useDraggable is not a readonly hook.

Here's my solution:

1. Patch @dnd-kit/core:

@dnd-kit/core/dist/core.esm.js

export { AutoScrollActivator, DndContext, DragOverlay, KeyboardCode, KeyboardSensor, MeasuringFrequency, MeasuringStrategy, MouseSensor, PointerSensor, TouchSensor, TraversalOrder, applyModifiers, closestCenter, closestCorners, defaultAnnouncements, defaultCoordinates, defaultDropAnimationConfiguration as defaultDropAnimation, defaultDropAnimationSideEffects, defaultScreenReaderInstructions, getClientRect, getFirstCollision, getScrollableAncestors, pointerWithin, rectIntersection, useDndContext, useDndMonitor, useDraggable, useDroppable, useSensor, useSensors };
+export { ActiveDraggableContext, InternalContext, AutoScrollActivator, DndContext, DragOverlay, KeyboardCode, KeyboardSensor, MeasuringFrequency, MeasuringStrategy, MouseSensor, PointerSensor, TouchSensor, TraversalOrder, applyModifiers, closestCenter, closestCorners, defaultAnnouncements, defaultCoordinates, defaultDropAnimationConfiguration as defaultDropAnimation, defaultDropAnimationSideEffects, defaultScreenReaderInstructions, getClientRect, getFirstCollision, getScrollableAncestors, pointerWithin, rectIntersection, useDndContext, useDndMonitor, useDraggable, useDroppable, useSensor, useSensors };

3. Observe internal context:

const NullContext = createContext(null);

const SomeComponent = () => {
  const id = 'someId'
  const innerContext = useContext(InternalContext);
  const isDragging = innerContext?.active?.id === id;
  const transform = useContext((isDragging ? ActiveDraggableContext : NullContext) as Context<Transform | null>)

  const style: CSSProperties = {
    transform: CSS.Transform.toString(transform)
  }

  return (
    <div style={style}>Something</div>
  )
}

Seems works fine