COMPONENT 74 · Motion & Interaction
拖放 / 排序
Drag and Drop / Sortable
也叫DnDSortableReorder拖拽排序
拖动物体到目标位置，以移动、上传或重新排序。
Moves, uploads, or reorders an object by dragging it to a target position.
ANATOMY & USAGE
结构与使用建议
组成部分
- 可拖动对象
- 拖动把手
- 放置目标与位置提示
适合使用
- 直接空间操作能明显简化移动或排序任务时。
不建议使用
- 精确拖动困难、操作风险高或没有替代方式时。
键盘与无障碍
- 提供上移下移按钮或键盘操作；播报抓取、目标位置和完成结果，触控目标足够大。
DESCRIBE IT TO AI
这样告诉编程助手
实现拖放 / 排序（Drag and Drop / Sortable）：拖动物体到目标位置，以移动、上传或重新排序。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<ol class="demo stack" id="sortable">
<li draggable="true">搜索 <button type="button" data-direction="down">下移</button>
</li>
<li draggable="true">筛选 <button type="button" data-direction="up">上移</button>
</li>
</ol>