Reorder Panel

Drag-and-drop section ordering for the event website editor.

In this page
March 20th, 2026

The Entry State

Reorder Panel

Allows the travel advisor and co‐editor to change the display order of sections:

  • Accessible from the list icon in the sidebar
  • User navigates to the Reorder Panel
  • Selects an editable page – Our Wedding, Wedding Events, or About
See Design
March 20th, 2026

Reordering Workflow

01. Initial State

  1. The Section Order panel opens, displaying all sections for that page as cards
  2. Each card shows the section title and its visibility status ‐ Visible or Hidden
  3. Each card displays a six‐dot drag handle (⋮⋮) on the left side
  4. The drag handle is a universal affordance signaling "I can be moved"
  5. The Save bar is not visible in the initial state

Dev Note: Click on the "See Design" button to see the hover effects.

See Design View Specs

02. Interaction State

  1. User PRESSES and HOLDS a section card to begin dragging
  2. A move cursor icon (✥) appears on the card
  3. The selected card lifts with a subtle shadow indicating elevation change
  4. The card background changes to a teal tint indicating it is picked up and active
  5. The card border changes to 2px weight and a teal color
  6. The Save bar slides up from the bottom of the panel
See Design View Specs

03. Mid‐Drag State

  1. The selected section card follows the cursor smoothly as the user drags it up or down the list
  2. A teal 3px drop zone line appears indicating where the card will land if released
  3. Other section cards shift in real time to make space as the dragged card moves past them
  4. A faded placeholder remains in the card's original position
  5. The Save bar remains visible at the bottom of the panel
See Design View Specs

04. Boundary Drag State

  1. User drags the selected card to the top edge of the list
  2. The drop zone line appears at the top or bottom boundary indicating the card will become the first or last item if released
  3. Other section cards have fully shifted to accommodate the new position
  4. The faded placeholder remains visible in the card's original position
  5. The Save bar remains visible at the bottom of the panel
See Design

05. Drop State

  1. User releases the card at the desired position
  2. The card snaps into its new position and returns to its default style – no elevation, no blue tint, no move cursor
  3. The faded placeholder disappears
  4. All section cards are at rest in the new order
  5. The live preview does not update until the user clicks Save
  6. The Save bar remains visible at the bottom of the panel
See Design

06. Saved State

  1. User clicks the Save button in the Save bar
  2. The Save bar disappears
  3. The live preview updates to reflect the new section order
  4. A toast notification appears in the bottom right of the preview area with the message "Changes saved successfully."
  5. The toast notification auto‐dismisses after 3 seconds
  6. The panel returns to the initial state with cards at rest in the new saved order
See Design
March 20th, 2026

Cancel Flow

01. Initiation

  • User clicks the Cancel button in the Save bar

02. Confirmation Overlay

  • The Unsaved Changes confirmation overlay appears inside the panel
  • The overlay displays the title "Unsaved Changes" and the message "Your changes will be lost if you cancel."

Two Actions:

  1. Keep Editing – the overlay dismisses and the user returns to the current panel state with the Save bar still visible
  2. Discard Changes – the overlay dismisses and the panel resets to the initial state with the original section order restored and the Save bar disappears
See Design View Specs