Inplace placeholder

[karesztrk]

Description

Is there a way to render placeholders at the position of the Draggable? My customer would like not to collapse the list when the dragging happens. Instead, we would add a placeholder indicating that the item is being dragged.

Does this library support this?

[staticshock]

Yes:

<Droppable droppableId={column.id}>
  {(provided) => (
    <div {...provided.droppableProps} ref={provided.innerRef}>
      {items.map((item, index) => (
        <Draggable key={item.id} draggableId={item.id} index={index}>
          {(provided) => (
            <Item
              key={item.id}
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
            />
          )}
        </Draggable>
      ))}
      {provided.placeholder}
    </div>
  )}
</Droppable>

{provided.placeholder} is where the magic happens.

[karesztrk]

Yes:

<Droppable droppableId={column.id}>
  {(provided) => (
    <div {...provided.droppableProps} ref={provided.innerRef}>
      {items.map((item, index) => (
        <Draggable key={item.id} draggableId={item.id} index={index}>
          {(provided) => (
            <Item
              key={item.id}
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
            />
          )}
        </Draggable>
      ))}
      {provided.placeholder}
    </div>
  )}
</Droppable>

{provided.placeholder} is where the magic happens.

Hey. Thanks for this recommendation but I still don't get it. I render the placeholder as you suggested. The placeholder is there correctly. But it's always rendered at the end of the list. What I want is to be rendered exactly under the dragged item. So I can put an overlay there that shows that the item is being dragged/used.

It should be something similar that dndkit does: storybook

[staticshock]

Ah, yes, I don't think that's possible with this library. From what I've seen in the source, the way DND works is that it adds an invisible placeholder at the bottom of the list, and then adds transform: translate(<x-offset>, <y-offset>) to all the displaced DOM nodes to create the appearance of an empty spot under the element you're dragging. When you style the "placeholder", this becomes obvious, and sounds like exactly what you're running into.