Akadálymentes átrendezés

Drag-and-Drop & Reordering

Use this skill when building sortable block lists, nested tree reordering, column/layout builders, or palette-to-canvas drag-and-drop interactions.

Core Interaction & Tree Validation Rules

1. Validate Drop Targets Against the Document Schema:
   • Before showing a positive drop indicator or committing a move, verify:
     • Cycle Prevention: A parent container can never be dropped inside itself or any of its own descendants.
     • Allowed Parent-Child Types: Check whether the target container permits the dragged block type and whether maximum nesting depth would be exceeded.
     • Clear Drop Zones: Distinguish before, after, and inside (reparenting/indenting) drop zones visually using horizontal/vertical pointer displacement and clear indicator lines.
2. Smooth Auto-Scroll, Touch & Cancellation:
   • Auto-Scrolling: Automatically scroll the nearest scrollable editor container (and window if needed) when the pointer approaches top/bottom/side edges during a drag.
   • Clean Cancellation: Pressing Escape, losing window focus (blur), or releasing over an invalid drop zone must abort the drag cleanly and restore the exact pre-drag layout without pushing an entry to the undo stack.
   • Touch & Pointer Activation Constraints: Require a small distance threshold (e.g., 4–8 px) or long-press delay (150–200 ms on touch) or dedicated drag handle so normal text selection, clicking, and mobile scrolling are never hijacked by accidental drags.
3. Commit as a Single Atomic Transaction:
   • Keep visual drag previews in ephemeral UI state during pointer movement and dispatch a single document move/reparent command on drop.

Mandatory Keyboard & Accessible Alternatives

Pointer drag-and-drop must never be the only way to reorder or move blocks:

• Provide explicit keyboard reordering shortcuts (e.g., Alt/Opt + ArrowUp/ArrowDown or Cmd/Ctrl + Shift + ArrowUp/ArrowDown to move blocks up/down, Tab / Shift+Tab or indent/outdent commands to change nesting level).
• Or provide an accessible block action menu ("Move up", "Move down", "Move into…") plus keyboard sensor support (Space/Enter to pick up, arrow keys to move, Space/Enter to drop, Escape to cancel).
• Announce drag start, current target position, drop completion, and cancellation via aria-live polite announcements.

Checklist

• Does drop validation block ancestor-into-descendant cycles and disallowed parent-child block types?
• Do edge auto-scrolling, Escape cancellation, and touch/click activation thresholds work reliably?
• Does dropping commit a single atomic transaction to the document model and undo history?
• Is there a complete keyboard and screen-reader alternative for every drag-and-drop reordering operation?