Support for Custom Placeholder Dimensions During Drag

[kantmichel]

Summary

When dragging items between lists with different sizing requirements, the default placeholder maintains the dragged item's original dimensions. This can cause layout issues in responsive grids where items should dynamically resize based on the number of items in the destination list.

Current behavior

• User drags a 12-column widget over a row with two 6-column widgets
• The two existing widgets correctly shrink to 4 columns each in our preview
• BUT the placeholder maintains its 12-column width, pushing the visible widgets off-screen horizontally

Desired behavior

• Placeholder should respect the redistributed dimensions (4 columns in this example)
• Visible widgets should remain on-screen during the entire drag operation

Proposed Solution Would it be possible to add an optional prop to Droppable or expose placeholder styling through the snapshot, allowing developers to customize placeholder dimensions during cross-list drags?

For example:

<Droppable
  droppableId={id}
  renderPlaceholder={(draggedItemId, snapshot) => ({
    width: calculateDynamicWidth(draggedItemId, snapshot),
    height: calculateDynamicHeight(draggedItemId, snapshot),
  })}
>

Or expose it through DroppableProvided:

provided.placeholder // current
provided.placeholderProps // new, allowing style overrides

Environment

• @hello-pangea/dnd: 18.0.1
• React: 18.3.1
• Layout: Flexbox-based 12-column grid system