# 拖拽排序

拖把手排序，其余项滑到新位置（FLIP）。触屏长按；键盘：把手上按空格拿起，↑ ↓ 移动，空格放下，Esc 取消。

```html
<ul class="xxd-list xxd-group__body xxd-sortable" data-xxd-sortable style="width:100%;max-width:300px" id="sort-demo">
  <li class="xxd-list__item" data-sort-item data-id="write"><button class="xxd-sort-handle" aria-label="拖动排序：写作" aria-pressed="false"><i data-xxd-icon="GripVertical" data-size="16"></i></button>写作</li>
  <li class="xxd-list__item" data-sort-item data-id="prompts"><button class="xxd-sort-handle" aria-label="拖动排序：提示词" aria-pressed="false"><i data-xxd-icon="GripVertical" data-size="16"></i></button>提示词</li>
  <li class="xxd-list__item" data-sort-item data-id="history"><button class="xxd-sort-handle" aria-label="拖动排序：记录" aria-pressed="false"><i data-xxd-icon="GripVertical" data-size="16"></i></button>记录</li>
  <li class="xxd-list__item" data-sort-item data-id="settings"><button class="xxd-sort-handle" aria-label="拖动排序：设置" aria-pressed="false"><i data-xxd-icon="GripVertical" data-size="16"></i></button>设置</li>
</ul>
<p class="xxd-help" id="sort-out"></p>
<script>document.getElementById("sort-demo").addEventListener("xxd:change", (e) => (document.getElementById("sort-out").textContent = "新顺序：" + e.detail.order.join(" · ")));</script>
```
- 动画只动 transform（FLIP），减少动效时直接到位
- 所有排序都能不用拖拽完成（键盘）

```js
list.addEventListener("xxd:change", (e) => e.detail.order)
await Xxd.flip(container, () => reorderDom())  // 通用的「滑到新位置」
```