For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.0/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.0/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.0/en/components/sortable-list.md.
A3S UI
  • English
  • v0.4.0

      • Sortable List

      Reorders a bounded ordered collection and gives pointer and keyboard paths the same result, cancellation, and status announcement.

      Live preview
      1. Research
      2. Review
      3. Publish

      Usage

      <ol class="sortable-list">
  <li data-sortable-item data-sortable-id="research"><button type="button" data-sortable-handle aria-label="Move Research"></button><span>Research</span></li><li data-sortable-item data-sortable-id="review"><button type="button" data-sortable-handle aria-label="Move Review"></button><span>Review</span></li><li data-sortable-item data-sortable-id="publish"><button type="button" data-sortable-handle aria-label="Move Publish"></button><span>Publish</span></li><li class="sr-only" aria-live="polite" data-sortable-status></li>
</ol>

      Standalone controller

      import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/sortable-list";

const component = document.querySelector(".sortable-list");
component.getOrder();

      The controller is idempotent; the complete package can instead import @a3s-lab/ui/all once. The host performs permission and business validation through cancelable before-* events.

      Contract

      SurfaceValue
      Root selector.sortable-list
      Native root<ol>
      Statesready, dragging, keyboard, disabled
      Eventsa3s:sortable-before-reorder, a3s:sortable-cancel, a3s:sortable-reorder
      Methodscancel, getOrder, move, refresh

      Product boundary

      It does not persist order, decide cross-list business rules, or scale to thousands of rows. The host validates permission before reordering and restores snapshots after failure.

      The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

      Accessibility

      Handles are focusable: Space picks up, arrows move, Enter drops, and Escape cancels. A live region announces the item and new position.