Skill · Version 1.0.0

Accessible reordering

Supports reliable reordering and tree movement through validated destinations, cancellable dragging and equivalent keyboard operations.

drag-and-drop-reordering

See how it helps

When is it useful?

Use it when people organize blocks, lessons or nested items and dragging alone would be insufficient.

What does it help you do?

Validates drop targets and prevents invalid tree nesting.
Provides keyboard moves and cancellation alongside dragging.
Announces movement and coordinates auto-scrolling with focus.

Try asking this

Reorder nested lessons using both dragging and a keyboard action menu. Move a lesson between modules and attempt to drop a module into itself. Preserve focus, announce the new position and reject the invalid nesting.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

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

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.
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.
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?

Included files 1

SKILL.md