模式 · 来自 会员站导航排序、图片排序
拖拽排序
拖把手排序，其余项滑到新位置（FLIP）。触屏长按；键盘：把手上按空格拿起，↑ ↓ 移动，空格放下，Esc 取消。
演示
- 写作
- 提示词
- 记录
- 设置
<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()) // 通用的「滑到新位置」