拖放
Drag and Drop
别名:拖放拖拽移动拖过去拖到那边拖来拖去drag and dropdnddrag to move
这是什么
用按住—拖动—松手的直接操作，把对象移动到新位置或新容器。所见即所得，比菜单命令更贴近空间直觉；拖动中要有清晰落点指示，目标容器需给出接受反馈。范围比拖拽排序更广：移动、归位、跨列表投递都算。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 对象需要在不同容器或位置之间移动（文件归档、素材入库）
- 空间位置本身就有语义（看板列、画布、网格布局）
- 用户群体以鼠标/触控板为主，拖拽是自然手势
✕ 不适用场景
- 仅需调整顺序，用拖拽排序或上移下移按钮更精准
- 目标位置不可见或需跨屏，落点极易投错
- 键盘与读屏是主要通道，却没有等价按钮兜底
常见形式
拖动移动
Drag to move
把对象拖到新位置或新容器，最通用
拖动排序
Drag to reorder
同一列表内换位，邻项实时让位
跨列表拖放
Drag between lists
从源列表拖入目标列表，源端可留占位
实现要点
cursor-grabtransform: translateopacitytransitionpointer-eventsHTML5 拖拽用 draggable + dragstart / dragover / drop；触屏不支持，需 Pointer Events 或按钮兜底。拖动中给原位置留半透明占位，目标容器高亮并显示落点线。drop 后更新数据源， 必要时乐观回滚。尊重 prefers-reduced-motion，位移过渡退化为直接落位。
平台 API
draggabledropPointer Events相关概念
拖拽排序Drag & Drop Sorting
用直接拖动的方式调整列表项的先后顺序：按住条目（或把手）拖到目标位置，其余条目实时让位并给出落点提示。 它把"排序"从抽象的上下移按钮变成所见即所得的空间操作，同时保留按钮作为可达性兜底。
交互模式相似概念行内编辑Inline Editing
页面上的文本本身即可编辑：单击把文本原位变成输入框，Enter 或失焦确认，Esc 取消， 改完所见即所得。它解决的是"小改动也要跳转完整编辑页"的问题—— 把修改成本降到一次点击，特别适合单字段的快速修订场景。
交互模式搭配使用看板Kanban Board
按状态分列的任务面板—— 通常"待办 / 进行中 / 已完成"三列， 卡片随状态推进在列间移动。 列的位置即流程阶段， 卡片的所在即任务状态， 一眼看清全局进展与瓶颈列。
交互模式搭配使用