拖放

本词条尚无可操作示例；插画为编辑示意，展示拖动影像与放置区的关系，不代表已验证的实现。应用到产品前必须逐项确认每个拖动功能都有不依赖拖动的等效路径，并实测键盘与读屏下的可用性。

{
  "states": [
    "idle",
    "dragging",
    "over-target",
    "dropped",
    "cancelled"
  ],
  "a11y": [
    "每项拖动功能都有键盘可达的等效操作",
    "拖动开始、进入目标与完成都通过状态消息播报",
    "可放置区域不只用颜色区分，另有边框或图标"
  ],
  "motion": "跟随指针的位移是操作反馈而非装饰；减弱动态偏好下省略回弹一类的附加动画"
}

{
  "id": "drag-and-drop",
  "type": "interaction",
  "name": {
    "zh": "拖放",
    "en": "Drag and Drop"
  },
  "aliases": [
    "Drag & Drop",
    "Drop Zone",
    "拖拽",
    "拖动排序"
  ],
  "granularity": "component",
  "intents": [
    "manipulate-object",
    "reach-target"
  ],
  "tags": [
    "拖动",
    "排序",
    "放置区",
    "指针",
    "无障碍"
  ],
  "definition": "按住一个对象、移动指针或手指到目标位置再松开，从而移动、排序或投放该对象：拖动过程中对象跟随指针，可接受它的区域被标示出来。",
  "boundary": "拖放是直接操纵的一种具体技法，不是它的同义词：直接操纵还包括点击、缩放与就地编辑。判定标准是\"按住—移动—松开\"这一连续动作决定结果。它对能力的要求比多数交互都高——同时按住并精确移动对同一目标，对震颤、单手操作或使用替代指点设备的人尤其困难——因此本词条把\"必须有不依赖拖动的等效路径\"视为硬性要求，而不是可选的增强。",
  "signature": [
    "按住后对象跟随指针移动，形成可见的拖动影像",
    "可接受放置的区域在拖动过程中被明确标示",
    "松开即完成，移出有效区域则取消"
  ],
  "when": [
    "对象之间的空间关系本身就是任务的一部分，例如排序或分组",
    "用户需要把外部文件带入界面",
    "目标位置在屏幕上可见，移动距离不长"
  ],
  "when_not": [
    "拖动是完成某件事的唯一途径，没有等效的单指针操作",
    "列表很长，目标位置需要边拖边滚动才能到达",
    "放置的后果不可撤销，却没有确认与撤销机制"
  ],
  "tradeoff": "空间操作让\"移动到哪里\"变得一目了然，代价是它对精细动作的要求很高，且拖动本身不留下可复述的痕迹：出错时用户往往说不清自己把东西放到了哪里。",
  "comparison": {
    "focus": "用连续的空间动作决定对象去向",
    "mechanism": "按住、跟随指针移动、在标示区域松开",
    "cost": "对精细动作要求高，且必须另备等效路径"
  },
  "sources": [
    {
      "id": "dnd-w3c-2-5-7",
      "title": "W3C · Understanding SC 2.5.7: Dragging Movements (WCAG 2.2, Level AA)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html",
      "claim": "该成功准则要求：所有使用拖动动作完成的功能，都必须能由单一指针在不拖动的情况下完成，除非拖动是本质必需的，或该功能由用户代理提供且作者未加修改。文档把要点概括为\"不要依赖拖动来完成操作；对任何涉及拖动的动作提供简单的指针替代\"，理由是有些人无法用鼠标拖动条目。本词条据此把等效路径列为硬性要求。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html",
        "status": "available",
        "checkedAt": "2026-09-16T03:49:42.520Z",
        "jobId": "spn2-de0b078ac0d810da71f0131e386164242929d831",
        "url": "https://web.archive.org/web/20260916035006/https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html",
        "timestamp": "20260916035006"
      }
    },
    {
      "id": "dnd-mdn",
      "title": "MDN · HTML Drag and Drop API",
      "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API",
      "claim": "该文档说明每次拖放操作都关联一个拖动数据存储：被拖动的数据必须序列化为字符串或文件，并带有说明其解释方式的类型标识；图片、链接与选区等默认可拖动的内容由浏览器定义其拖动数据，而用 draggable 属性自定义的元素必须由作者在 dragstart 中写入数据。本词条据此说明拖放传递的是数据而非对象本身，实现细节以文档为准。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API",
        "status": "available",
        "checkedAt": "2026-09-22T11:53:33.051Z",
        "jobId": "spn2-2b0ca4a3d2c6bbfd180f3a35f8332dbb0a3f7975",
        "url": "https://web.archive.org/web/20260922115357/https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API",
        "timestamp": "20260922115357"
      }
    }
  ],
  "relations": [
    {
      "target": "direct-manipulation",
      "kind": "realized_by",
      "condition": "界面让用户直接操作屏幕上的对象而不是通过表单",
      "reason": "拖放是直接操纵的一种具体技法；直接操纵还包括点击、缩放与就地编辑等其他手段。",
      "basis": "editorial"
    },
    {
      "target": "undo-redo",
      "kind": "composes_with",
      "condition": "放置会改变数据且用户可能放错位置",
      "reason": "拖动不留下可复述的痕迹，撤销是用户在放错之后唯一可靠的退路。",
      "basis": "editorial"
    },
    {
      "target": "fitts-law",
      "kind": "composes_with",
      "condition": "放置目标较小或距离起点较远",
      "reason": "拖动全程都要维持在目标上，目标越小越远，完成一次拖放的时间与失败率就越高。",
      "basis": "editorial"
    },
    {
      "target": "perceivable-alternatives",
      "kind": "composes_with",
      "condition": "拖动是某项功能当前的主要操作方式",
      "reason": "必须另有不依赖拖动的等效路径，例如剪切粘贴、上移下移或选择目标位置的菜单。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "界面提供任何依赖拖动完成的功能",
      "instruction": "同时提供不需要拖动的单指针替代路径，除非拖动对该功能本质必需。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "拖动过程中",
      "instruction": "标示出可放置的区域与将要落入的位置，并让移出有效区域等于取消，而不是落到最近的目标上。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "idle",
      "dragging",
      "over-target",
      "dropped",
      "cancelled"
    ],
    "a11y": [
      "每项拖动功能都有键盘可达的等效操作",
      "拖动开始、进入目标与完成都通过状态消息播报",
      "可放置区域不只用颜色区分，另有边框或图标"
    ],
    "motion": "跟随指针的位移是操作反馈而非装饰；减弱动态偏好下省略回弹一类的附加动画"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意，展示拖动影像与放置区的关系，不代表已验证的实现。应用到产品前必须逐项确认每个拖动功能都有不依赖拖动的等效路径，并实测键盘与读屏下的可用性。",
  "image": {
    "src": "/images/drag-and-drop.webp",
    "alt": "一张名为 FIELDNOTES 的虚构看板示意：三列彩色栏目中，一张卡片被抬起并带有轻微倾斜与投影，沿一条弧形箭头移向右侧，目标列以虚线边框标出可放置区域，原位置留下一块浅色空位。"
  },
  "searchTerms": [
    "dragging",
    "reordering",
    "drop zone",
    "pointer",
    "accessibility"
  ]
}