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

      • 可排序列表

      重排一个规模有限的有序集合，并为拖拽与键盘操作提供相同的顺序结果、取消和状态播报。

      实时预览
      1. 研究
      2. 审核
      3. 发布

      用法

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

      独立控制器

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

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

      控制器是幂等的；完整包可改为一次导入 @a3s-lab/ui/all。宿主通过可取消的 before-* 事件执行权限与业务校验。

      契约

      接口值
      根选择器.sortable-list
      原生根元素<ol>
      状态ready, dragging, keyboard, disabled
      事件a3s:sortable-before-reorder, a3s:sortable-cancel, a3s:sortable-reorder
      方法cancel, getOrder, move, refresh

      产品边界

      组件不持久化顺序、不处理跨列表业务规则，也不适合上千项数据。宿主在 before 事件中验证权限并在失败时恢复快照。

      组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。

      可访问性

      手柄可聚焦，空格拾取，方向键移动，Enter 放下，Escape 取消。实时区域播报项目名称和新位置。