Multiple columns with limited item count

Hello

I am trying to built a UI using `@dnd-kit/react` where users can drag buttons between various pages. The number of buttons on each page is limited to a number depending on the corresponding device that they use.

If a user drags a button from page 1 to page 2, then the first button of page 2 should become the last button on page 1. So essentially I'm looking for a way where the items always try to fill up each column as much as they can. I cannot seam to figure this out in a way where dnd-kit provides the feedback while dragging items.

Is there a way to do this with this package?

There's a couple of other additional complexities, e.g. sometimes the last button of a page is a fixed system button that cannot ever move and thus other buttons should move around it. Currently the "disabled" option on items only makes it so you cannot move them directly but they still can be moved when other items around them move. Are there ways to create this behavior?

Start by reviewing the @dnd-kit/react package and its drag, droppable, and sortable behavior to determine whether cross-page capacity changes are supported. Clarify the expected behavior for full pages and fixed system buttons before identifying an implementation target; the issue does not name files, tests, or a concrete completion criterion.

Written by the indexing model from the issue text.