Drag To Reorder Gallery Block for React

Tab to a page's grip (named "Reorder Pavilion plan") and press Space: it is picked up (aria-pressed). The arrow keys move it one place (Left and Right swap in a right-to-left layout), Home and End send it to the first or last place, Space drops it and Escape puts it back where it started. Focus stays on the grip the whole time. Tabbing away drops it where it is.

No. Move earlier and Move later under every page move it one place and keep focus on the button you pressed (or on its partner at an end of the list), and they announce the move. They are the route for touch and for anyone who cannot hold a drag.

Pressing a grip hands the pointer to the grid (pointer capture), so the grip can move in the page while you drag it. As the pointer crosses another page, the dragged page takes that page's place and the others make room; letting go drops it. The page being dragged has a heavy ring. A tap on a touch screen does nothing; use the buttons.

Each pick-up, move, drop and cancel is written to a log that is also a polite live region, so a screen reader hears "Grabbed Cover, position 1 of 8" and "Cover moved to position 2 of 8". The visible log keeps the last four lines. The log, the grid and the page's height never change size.

No. The order, the Cover and the log are state in the block. It all lives in the block's own state and is gone on reload. Each action says "nothing is saved in this demo" in a polite status line; wire the handlers to your own storage or API when you use it.

The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the picture's own so the layout doesn't change. Keep each page's ratio the picture's own.

The grid goes under the copy in two columns, with square pictures so the controls stay in view; the keys and the log follow it. The two buttons are the way to reorder on touch.