Inplace placeholder

[karesztrk]

Inplace placeholder

[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.

[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