Sortable List

<ul class="my-sortable" data-cia-recipe="sortable-list" role="list" aria-label="Task order">
  <li data-slot="item" draggable="true" data-id="a">
    <button
      type="button"
      data-slot="handle"
      aria-label="Reorder: Write the launch post"
      aria-describedby="my-sortable-hint"
      aria-pressed="false"
    >
      <span aria-hidden="true">⠿</span>
    </button>
    <span data-slot="label">Write the launch post</span>
  </li>
  <li data-slot="item" draggable="true" data-id="b" data-drop-position="before">
    <button type="button" data-slot="handle" aria-label="Reorder: Record the demo" aria-describedby="my-sortable-hint" aria-pressed="false">
      <span aria-hidden="true">⠿</span>
    </button>
    <span data-slot="label">Record the demo</span>
  </li>
  <li data-slot="item" draggable="true" data-id="c" data-grabbed>
    <button type="button" data-slot="handle" aria-label="Reorder: Ship it" aria-describedby="my-sortable-hint" aria-pressed="true">
      <span aria-hidden="true">⠿</span>
    </button>
    <span data-slot="label">Ship it</span>
  </li>
</ul>
<p id="my-sortable-hint" hidden>Press Space to grab, arrow keys to move, Space to drop, Escape to cancel.</p>
<div data-slot="announce" aria-live="assertive" aria-atomic="true" class="my-sr-only"></div>

// SortableList.module.scss — component stylesheet, so import the zero-emit barrel.
@use 'css-is-awesome/api' as cia;

.my-sortable {
  @include cia.list-reset;
  @include cia.stack($gap: 1);

  [data-slot="item"] {
    @include cia.list-item($py: 2, $px: 2);
    position: relative;
    border: 1px solid cia.color(border-default);
    border-radius: cia.radius(md);
    background: cia.color(surface-default);
    @include cia.transition(box-shadow, opacity);

    // The insertion line: a 2px bar hugging the top or bottom edge of the
    // item the pointer is over. Drawn from an attribute the JS toggles, so
    // the consumer never has to agree on a class name with the script.
    &::before {
      content: '';
      position: absolute;
      inset-inline: 0;
      block-size: 2px;
      background: cia.color(action-primary-default);
      opacity: 0;
      pointer-events: none;
    }
    &[data-drop-position="before"]::before { inset-block-start: -3px; opacity: 1; }
    &[data-drop-position="after"]::before  { inset-block-end: -3px;   opacity: 1; }

    // Picked up (keyboard grab or pointer drag): lift it and tint the border.
    &[data-grabbed] {
      @include cia.elevation(2);
      border-color: cia.color(action-primary-default);
      opacity: 0.85;
    }
  }

  [data-slot="handle"] {
    @include cia.btn-icon($size: 2rem, $r: sm);
    cursor: grab;
    color: cia.color(text-muted);
    touch-action: none;

    &[aria-pressed="true"] { cursor: grabbing; color: cia.color(action-primary-default); }
  }

  [data-slot="label"] {
    flex: 1;
    @include cia.font(reg, 2);
  }
}

.my-sr-only { @include cia.sr-only; }

"use client";
import { useRef, useState } from "react";
import styles from "./SortableList.module.scss";

type Item = { id: string; label: string };

export default function SortableList({ initial, onChange }: { initial: Item[]; onChange?: (items: Item[]) => void }) {
  const [items, setItems] = useState(initial);
  const [grabbed, setGrabbed] = useState<string | null>(null);
  const [drop, setDrop] = useState<{ id: string; pos: "before" | "after" } | null>(null);
  const [announce, setAnnounce] = useState("");
  const snapshot = useRef<Item[] | null>(null);
  const dragIndex = useRef<number | null>(null);
  const armed = useRef(false); // pointer went down on a handle

  function say(text: string) {
    setAnnounce("");
    requestAnimationFrame(() => setAnnounce(text));
  }

  function move(from: number, to: number) {
    if (from === to || to < 0 || to >= items.length) return items;
    const next = [...items];
    const [it] = next.splice(from, 1);
    next.splice(to, 0, it);
    setItems(next);
    onChange?.(next);
    return next;
  }

  // ── keyboard ──
  function onHandleKeyDown(e: React.KeyboardEvent<HTMLButtonElement>, index: number) {
    const item = items[index];
    const isGrabbed = grabbed === item.id;
    if (e.key === " " || e.key === "Enter") {
      e.preventDefault();
      if (!isGrabbed) {
        snapshot.current = items;
        setGrabbed(item.id);
        say(`Grabbed ${item.label}, position ${index + 1} of ${items.length}.`);
      } else {
        setGrabbed(null);
        say(`Dropped ${item.label} at position ${index + 1} of ${items.length}.`);
      }
    } else if (e.key === "Escape" && isGrabbed) {
      e.preventDefault();
      if (snapshot.current) { setItems(snapshot.current); onChange?.(snapshot.current); }
      setGrabbed(null);
      say("Reorder cancelled.");
    } else if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Home" || e.key === "End") {
      e.preventDefault();
      const to = e.key === "ArrowUp" ? index - 1 : e.key === "ArrowDown" ? index + 1 : e.key === "Home" ? 0 : items.length - 1;
      if (isGrabbed) {
        const next = move(index, to);
        const at = next.findIndex((i) => i.id === item.id);
        say(`${item.label} moved to position ${at + 1} of ${next.length}.`);
      } else {
        const handles = e.currentTarget.closest("ul")?.querySelectorAll<HTMLButtonElement>('[data-slot="handle"]');
        handles?.[Math.max(0, Math.min(to, items.length - 1))]?.focus();
      }
    } else if (e.key === "Tab" && isGrabbed) {
      setGrabbed(null);
      say(`Dropped ${item.label} at position ${index + 1} of ${items.length}.`);
    }
  }

  // ── pointer (HTML5 DnD) ──
  function onDragStart(e: React.DragEvent<HTMLLIElement>, index: number) {
    if (!armed.current) { e.preventDefault(); return; } // dragstart targets the <li>, so ask the flag
    dragIndex.current = index;
    e.dataTransfer.setData("text/plain", items[index].id);
    e.dataTransfer.effectAllowed = "move";
    setGrabbed(items[index].id);
  }
  function onDragOver(e: React.DragEvent<HTMLLIElement>, id: string) {
    e.preventDefault();
    const r = e.currentTarget.getBoundingClientRect();
    setDrop({ id, pos: e.clientY < r.top + r.height / 2 ? "before" : "after" });
  }
  function onDrop(e: React.DragEvent<HTMLLIElement>, index: number) {
    e.preventDefault();
    const from = dragIndex.current;
    if (from === null || !drop) return;
    let to = drop.pos === "before" ? index : index + 1;
    if (from < to) to -= 1;
    const next = move(from, to);
    say(`${items[from].label} moved to position ${to + 1} of ${next.length}.`);
    clear();
  }
  function clear() { dragIndex.current = null; armed.current = false; setGrabbed(null); setDrop(null); }

  return (
    <>
      <ul className={styles.mySortable} data-cia-recipe="sortable-list" role="list" aria-label="Task order">
        {items.map((item, index) => (
          <li
            key={item.id}
            data-slot="item"
            draggable
            data-grabbed={grabbed === item.id || undefined}
            data-drop-position={drop?.id === item.id ? drop.pos : undefined}
            onDragStart={(e) => onDragStart(e, index)}
            onDragOver={(e) => onDragOver(e, item.id)}
            onDragLeave={() => setDrop((d) => (d?.id === item.id ? null : d))}
            onDrop={(e) => onDrop(e, index)}
            onDragEnd={clear}
          >
            <button
              type="button"
              data-slot="handle"
              aria-label={`Reorder: ${item.label}`}
              aria-describedby="my-sortable-hint"
              aria-pressed={grabbed === item.id}
              onKeyDown={(e) => onHandleKeyDown(e, index)}
              onPointerDown={() => { armed.current = true; }}
              onPointerUp={() => { armed.current = false; }}
            >
              <span aria-hidden="true">⠿</span>
            </button>
            <span data-slot="label">{item.label}</span>
          </li>
        ))}
      </ul>
      <p id="my-sortable-hint" hidden>Press Space to grab, arrow keys to move, Space to drop, Escape to cancel.</p>
      <div data-slot="announce" aria-live="assertive" aria-atomic="true" className={styles.mySrOnly}>{announce}</div>
    </>
  );
}

<script setup>
import { ref, nextTick } from "vue";

const props = defineProps({ initial: { type: Array, required: true } });
const emit = defineEmits(["change"]);

const items = ref([...props.initial]);
const grabbed = ref(null);
const drop = ref(null);
const announce = ref("");
let snapshot = null;
let dragIndex = null;
let armed = false; // pointer went down on a handle

async function say(text) { announce.value = ""; await nextTick(); announce.value = text; }

function move(from, to) {
  if (from === to || to < 0 || to >= items.value.length) return;
  const [it] = items.value.splice(from, 1);
  items.value.splice(to, 0, it);
  emit("change", [...items.value]);
}

function onHandleKeydown(e, index) {
  const item = items.value[index];
  const isGrabbed = grabbed.value === item.id;
  if (e.key === " " || e.key === "Enter") {
    e.preventDefault();
    if (!isGrabbed) { snapshot = [...items.value]; grabbed.value = item.id; say(`Grabbed ${item.label}, position ${index + 1} of ${items.value.length}.`); }
    else { grabbed.value = null; say(`Dropped ${item.label} at position ${index + 1} of ${items.value.length}.`); }
  } else if (e.key === "Escape" && isGrabbed) {
    e.preventDefault();
    if (snapshot) { items.value = snapshot; emit("change", [...snapshot]); }
    grabbed.value = null; say("Reorder cancelled.");
  } else if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
    e.preventDefault();
    const to = e.key === "ArrowUp" ? index - 1 : e.key === "ArrowDown" ? index + 1 : e.key === "Home" ? 0 : items.value.length - 1;
    if (isGrabbed) { move(index, to); const at = items.value.findIndex((i) => i.id === item.id); say(`${item.label} moved to position ${at + 1} of ${items.value.length}.`); }
    else e.currentTarget.closest("ul").querySelectorAll('[data-slot="handle"]')[Math.max(0, Math.min(to, items.value.length - 1))]?.focus();
  } else if (e.key === "Tab" && isGrabbed) {
    grabbed.value = null; say(`Dropped ${item.label} at position ${index + 1} of ${items.value.length}.`);
  }
}

function onDragStart(e, index) {
  if (!armed) { e.preventDefault(); return; } // dragstart targets the <li>, so ask the flag
  dragIndex = index;
  e.dataTransfer.setData("text/plain", items.value[index].id);
  e.dataTransfer.effectAllowed = "move";
  grabbed.value = items.value[index].id;
}
function onDragOver(e, id) {
  e.preventDefault();
  const r = e.currentTarget.getBoundingClientRect();
  drop.value = { id, pos: e.clientY < r.top + r.height / 2 ? "before" : "after" };
}
function onDrop(e, index) {
  e.preventDefault();
  if (dragIndex === null || !drop.value) return;
  let to = drop.value.pos === "before" ? index : index + 1;
  if (dragIndex < to) to -= 1;
  const label = items.value[dragIndex].label;
  move(dragIndex, to);
  say(`${label} moved to position ${to + 1} of ${items.value.length}.`);
  clear();
}
function clear() { dragIndex = null; armed = false; grabbed.value = null; drop.value = null; }
</script>

<template>
  <ul class="my-sortable" data-cia-recipe="sortable-list" role="list" aria-label="Task order">
    <li
      v-for="(item, index) in items"
      :key="item.id"
      data-slot="item"
      draggable="true"
      :data-grabbed="grabbed === item.id ? '' : undefined"
      :data-drop-position="drop && drop.id === item.id ? drop.pos : undefined"
      @dragstart="onDragStart($event, index)"
      @dragover="onDragOver($event, item.id)"
      @dragleave="drop && drop.id === item.id && (drop = null)"
      @drop="onDrop($event, index)"
      @dragend="clear"
    >
      <button
        type="button"
        data-slot="handle"
        :aria-label="`Reorder: ${item.label}`"
        aria-describedby="my-sortable-hint"
        :aria-pressed="grabbed === item.id"
        @keydown="onHandleKeydown($event, index)"
        @pointerdown="armed = true"
        @pointerup="armed = false"
      >
        <span aria-hidden="true">⠿</span>
      </button>
      <span data-slot="label">{{ item.label }}</span>
    </li>
  </ul>
  <p id="my-sortable-hint" hidden>Press Space to grab, arrow keys to move, Space to drop, Escape to cancel.</p>
  <div data-slot="announce" aria-live="assertive" aria-atomic="true" class="my-sr-only">{{ announce }}</div>
</template>

<script>
  import { tick } from "svelte";
  export let initial = [];
  export let onChange = (items) => {};

  let items = [...initial];
  let grabbed = null;
  let drop = null;
  let announce = "";
  let snapshot = null;
  let dragIndex = null;
  let armed = false; // pointer went down on a handle

  async function say(text) { announce = ""; await tick(); announce = text; }

  function move(from, to) {
    if (from === to || to < 0 || to >= items.length) return;
    const next = [...items];
    const [it] = next.splice(from, 1);
    next.splice(to, 0, it);
    items = next;
    onChange(items);
  }

  function onHandleKeydown(e, index) {
    const item = items[index];
    const isGrabbed = grabbed === item.id;
    if (e.key === " " || e.key === "Enter") {
      e.preventDefault();
      if (!isGrabbed) { snapshot = [...items]; grabbed = item.id; say(`Grabbed ${item.label}, position ${index + 1} of ${items.length}.`); }
      else { grabbed = null; say(`Dropped ${item.label} at position ${index + 1} of ${items.length}.`); }
    } else if (e.key === "Escape" && isGrabbed) {
      e.preventDefault();
      if (snapshot) { items = snapshot; onChange(items); }
      grabbed = null; say("Reorder cancelled.");
    } else if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
      e.preventDefault();
      const to = e.key === "ArrowUp" ? index - 1 : e.key === "ArrowDown" ? index + 1 : e.key === "Home" ? 0 : items.length - 1;
      if (isGrabbed) { move(index, to); const at = items.findIndex((i) => i.id === item.id); say(`${item.label} moved to position ${at + 1} of ${items.length}.`); }
      else e.currentTarget.closest("ul").querySelectorAll('[data-slot="handle"]')[Math.max(0, Math.min(to, items.length - 1))]?.focus();
    } else if (e.key === "Tab" && isGrabbed) {
      grabbed = null; say(`Dropped ${item.label} at position ${index + 1} of ${items.length}.`);
    }
  }

  function onDragStart(e, index) {
    if (!armed) { e.preventDefault(); return; } // dragstart targets the <li>, so ask the flag
    dragIndex = index;
    e.dataTransfer.setData("text/plain", items[index].id);
    e.dataTransfer.effectAllowed = "move";
    grabbed = items[index].id;
  }
  function onDragOver(e, id) {
    e.preventDefault();
    const r = e.currentTarget.getBoundingClientRect();
    drop = { id, pos: e.clientY < r.top + r.height / 2 ? "before" : "after" };
  }
  function onDrop(e, index) {
    e.preventDefault();
    if (dragIndex === null || !drop) return;
    let to = drop.pos === "before" ? index : index + 1;
    if (dragIndex < to) to -= 1;
    const label = items[dragIndex].label;
    move(dragIndex, to);
    say(`${label} moved to position ${to + 1} of ${items.length}.`);
    clear();
  }
  function clear() { dragIndex = null; armed = false; grabbed = null; drop = null; }
</script>

<ul class="my-sortable" data-cia-recipe="sortable-list" role="list" aria-label="Task order">
  {#each items as item, index (item.id)}
    <li
      data-slot="item"
      draggable="true"
      data-grabbed={grabbed === item.id ? "" : undefined}
      data-drop-position={drop && drop.id === item.id ? drop.pos : undefined}
      on:dragstart={(e) => onDragStart(e, index)}
      on:dragover={(e) => onDragOver(e, item.id)}
      on:dragleave={() => { if (drop && drop.id === item.id) drop = null; }}
      on:drop={(e) => onDrop(e, index)}
      on:dragend={clear}
    >
      <button
        type="button"
        data-slot="handle"
        aria-label={`Reorder: ${item.label}`}
        aria-describedby="my-sortable-hint"
        aria-pressed={grabbed === item.id}
        on:keydown={(e) => onHandleKeydown(e, index)}
        on:pointerdown={() => (armed = true)}
        on:pointerup={() => (armed = false)}
      >
        <span aria-hidden="true">⠿</span>
      </button>
      <span data-slot="label">{item.label}</span>
    </li>
  {/each}
</ul>
<p id="my-sortable-hint" hidden>Press Space to grab, arrow keys to move, Space to drop, Escape to cancel.</p>
<div data-slot="announce" aria-live="assertive" aria-atomic="true" class="my-sr-only">{announce}</div>

class SortableList extends HTMLElement {
  connectedCallback() {
    this.list = this.querySelector("ul");
    this.live = this.querySelector('[data-slot="announce"]');
    this.grabbed = null;      // <li> currently held
    this.snapshot = null;     // order before a keyboard grab, for Escape
    this.dragged = null;      // <li> in an HTML5 drag
    this.armed = false;       // pointer went down on a handle

    this.list.addEventListener("pointerdown", (e) => { this.armed = !!e.target.closest('[data-slot="handle"]'); });
    this.list.addEventListener("pointerup", () => { this.armed = false; });
    this.list.addEventListener("keydown", (e) => this.onKeyDown(e));
    this.list.addEventListener("dragstart", (e) => this.onDragStart(e));
    this.list.addEventListener("dragover", (e) => this.onDragOver(e));
    this.list.addEventListener("dragleave", (e) => e.target.closest?.('[data-slot="item"]')?.removeAttribute("data-drop-position"));
    this.list.addEventListener("drop", (e) => this.onDrop(e));
    this.list.addEventListener("dragend", () => this.clear());
  }

  get items() { return [...this.list.querySelectorAll('[data-slot="item"]')]; }
  labelOf(li) { return li.querySelector('[data-slot="label"]').textContent.trim(); }
  say(text) { this.live.textContent = ""; requestAnimationFrame(() => { this.live.textContent = text; }); }

  move(li, to) {
    const items = this.items;
    const from = items.indexOf(li);
    if (to < 0 || to >= items.length || to === from) return;
    const ref = to > from ? items[to].nextSibling : items[to];
    this.list.insertBefore(li, ref);
    this.dispatchEvent(new CustomEvent("change", { detail: this.items.map((i) => i.dataset.id) }));
  }

  setGrabbed(li) {
    this.grabbed?.removeAttribute("data-grabbed");
    this.grabbed?.querySelector('[data-slot="handle"]').setAttribute("aria-pressed", "false");
    this.grabbed = li;
    if (li) { li.setAttribute("data-grabbed", ""); li.querySelector('[data-slot="handle"]').setAttribute("aria-pressed", "true"); }
  }

  onKeyDown(e) {
    const handle = e.target.closest('[data-slot="handle"]');
    if (!handle) return;
    const li = handle.closest('[data-slot="item"]');
    const items = this.items;
    const index = items.indexOf(li);
    const held = this.grabbed === li;
    const pos = () => `${this.items.indexOf(li) + 1} of ${items.length}`;

    if (e.key === " " || e.key === "Enter") {
      e.preventDefault();
      if (!held) { this.snapshot = items; this.setGrabbed(li); this.say(`Grabbed ${this.labelOf(li)}, position ${pos()}.`); }
      else { this.setGrabbed(null); this.say(`Dropped ${this.labelOf(li)} at position ${pos()}.`); }
    } else if (e.key === "Escape" && held) {
      e.preventDefault();
      this.snapshot?.forEach((el) => this.list.appendChild(el));
      this.setGrabbed(null);
      this.say("Reorder cancelled.");
    } else if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
      e.preventDefault();
      const to = e.key === "ArrowUp" ? index - 1 : e.key === "ArrowDown" ? index + 1 : e.key === "Home" ? 0 : items.length - 1;
      if (held) { this.move(li, to); this.say(`${this.labelOf(li)} moved to position ${pos()}.`); }
      else items[Math.max(0, Math.min(to, items.length - 1))].querySelector('[data-slot="handle"]').focus();
    } else if (e.key === "Tab" && held) {
      this.setGrabbed(null);
      this.say(`Dropped ${this.labelOf(li)} at position ${pos()}.`);
    }
  }

  onDragStart(e) {
    const li = e.target.closest('[data-slot="item"]');
    if (!li || !this.armed) { e.preventDefault(); return; } // dragstart targets the <li>, so ask the flag
    this.dragged = li;
    e.dataTransfer.setData("text/plain", li.dataset.id ?? "");
    e.dataTransfer.effectAllowed = "move";
    this.setGrabbed(li);
  }
  onDragOver(e) {
    const li = e.target.closest('[data-slot="item"]');
    if (!li || li === this.dragged) return;
    e.preventDefault();
    const r = li.getBoundingClientRect();
    this.items.forEach((i) => i.removeAttribute("data-drop-position"));
    li.setAttribute("data-drop-position", e.clientY < r.top + r.height / 2 ? "before" : "after");
  }
  onDrop(e) {
    const li = e.target.closest('[data-slot="item"]');
    if (!li || !this.dragged) return;
    e.preventDefault();
    const items = this.items;
    let to = li.getAttribute("data-drop-position") === "before" ? items.indexOf(li) : items.indexOf(li) + 1;
    if (items.indexOf(this.dragged) < to) to -= 1;
    const label = this.labelOf(this.dragged);
    this.move(this.dragged, to);
    this.say(`${label} moved to position ${to + 1} of ${items.length}.`);
    this.clear();
  }
  clear() {
    this.items.forEach((i) => i.removeAttribute("data-drop-position"));
    this.setGrabbed(null);
    this.dragged = null;
    this.armed = false;
  }
}
customElements.define("sortable-list", SortableList);

<sortable-list>
  <ul class="my-sortable" data-cia-recipe="sortable-list" role="list" aria-label="Task order">
    <li data-slot="item" draggable="true" data-id="a">
      <button type="button" data-slot="handle" aria-label="Reorder: Write the launch post" aria-describedby="my-sortable-hint" aria-pressed="false"><span aria-hidden="true">⠿</span></button>
      <span data-slot="label">Write the launch post</span>
    </li>
    <!-- … -->
  </ul>
  <p id="my-sortable-hint" hidden>Press Space to grab, arrow keys to move, Space to drop, Escape to cancel.</p>
  <div data-slot="announce" aria-live="assertive" aria-atomic="true" class="my-sr-only"></div>
</sortable-list>

@use 'css-is-awesome/api' as cia;

.my-sortable-row {
  @include cia.list-reset;
  @include cia.cluster($gap: 1);

  [data-slot="item"]::before {
    inset-inline: auto;
    inset-block: 0;
    inline-size: 2px;
    block-size: auto;
  }
  [data-slot="item"][data-drop-position="before"]::before { inset-inline-start: -3px; inset-block-start: 0; }
  [data-slot="item"][data-drop-position="after"]::before  { inset-inline-end: -3px;   inset-block-end: 0; }
}