Dashboard implementation suggestions

[jivung]

I want to create a dashboard. The dashboard contains "widgets" of variable sizes that the user can place in a grid.

The placement of the widgets have the following constraints:

• A widget cant overlap with another widget
• A widget cant be placed right next to another widget - a gap is required
• A widget cant be placed right next to the edge of the dashboard - a gap is required

This is illustrated in the following image. The grey boxes are existing widgets. The blue box is a widget being dragged. The green space indicate where the dragged widget is allowed to be placed.

I'm wondering what might be good implementation solution using dnd-kit.

One spontanious possible solution that I came up with:

• When the user starts dragging a widget multiple droppables are created at every possible location where the widget is allowed to be placed.

[jivung]

I found another package that do just this: react-grid-layout. Using that instead.