shadcn.io is not affiliated with official shadcn/ui
Drag To Reorder Gallery Block for Vue
Eight drawn portfolio pages in a framed grid that you reorder by dragging a grip, by Space and the arrow keys, or with Move earlier and Move later buttons, with every move announced and logged.
Installation
Overview
Reorder by hand for Vue with Ark UI, for Foliant, a portfolio builder. A split puts the copy, the keys and a log of every move at the start, and at the end, past the divider, eight drawn portfolio pages in a framed grid on shared hairlines with + marks on its corners. The first page is the Cover. Each page has a grip you drag with a pointer, or pick up with Space, move with the arrow keys (Home and End jump to the ends), drop with Space and cancel with Escape, and two buttons, Move earlier and Move later, which work on their own for keyboard and touch. Every move is announced ("Pavilion plan moved to position 4 of 8") and listed in the log. There's no drag-and-drop library: just pointer capture and a few key handlers. The pages are drawn in the theme's greys. It's built from Guides and Button styles.
FAQ
How do I reorder with the keyboard?
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.
Do I have to drag?
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.
How does the pointer drag work?
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.
How are moves announced?
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.
Is anything saved or sent?
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.
How do I use my own pictures?
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.