Sortable list

Reorder items with a drag handle, move buttons, or the keyboard. A requested move appears immediately while the application catches up.

Fixture

This page simulates a delayed application response. It does not contact a server. A requested move appears immediately while the fixture prepares authoritative markup.

Code

<!-- Optional files, outside main.css and main.js -->
<link rel="stylesheet" href="/dist/sortable-list.css">
<script type="module" src="/dist/sortable-list.js"></script>

<lw-sortable-list data-sortable-variant="cards" aria-label="List A">
  <ol data-sortable-list>
    <li data-sortable-item data-item-id="a-1" data-item-label="First item">
      <span data-sortable-content>First item</span>
      <span data-sortable-actions>
        <button type="button" data-sortable-handle aria-label="Move First item">⠿</button>
        <button type="button" data-sortable-move="up" aria-label="Move First item up">↑</button>
        <button type="button" data-sortable-move="down" aria-label="Move First item down">↓</button>
      </span>
    </li>
  </ol>
  <p data-sortable-status role="status" aria-live="polite" aria-atomic="true" tabindex="-1"></p>
</lw-sortable-list>

Cards with handle and arrows

First item
Second item
Third item has a nested link

Cards with handle only

Red folder
Blue folder

Dividers with arrows only

Draft outline
Workshop notes
Final copy

Compact dividers with handle only

Open
In review
Done

In a lined table

The same interaction can enhance table rows. The handle sits in the first column, and the table keeps its native structure and horizontal-only rules. The visible row moves immediately while the response is pending.

Member requirements
Order	Member practice	Shared purpose	Position controls
	Member orientation	Welcome people into the co-op and how members work together.
	Shared agreements	Review the agreements members use to work together.
	Governance participation	Take part in a member meeting or decision round.