{
  "_description": "Generated from data/ — edit the sources, not this file. The agent access guide explains the evidence boundary of every field.",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "en",
  "id": "drag-and-drop",
  "name": {
    "zh": "拖放",
    "en": "Drag and Drop"
  },
  "page": "https://designvocabulary.com/en/entries/drag-and-drop/",
  "self": "https://designvocabulary.com/en/entries/drag-and-drop.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/drag-and-drop.json",
    "en": "https://designvocabulary.com/en/entries/drag-and-drop.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 137,
    "index": "https://designvocabulary.com/en/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=en",
    "guide": "https://designvocabulary.com/en/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.relations",
      "entry.implementationNote",
      "entry.behavior"
    ],
    "scope": "Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.",
    "editorialStatus": "drafted",
    "specimenData": "fictional",
    "specimenNote": "Original fictional specimens. Definitions cite sources; usage advice and recipes are editorial.",
    "sources": [
      {
        "id": "dnd-w3c-2-5-7",
        "url": "https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html",
        "title": "W3C · Understanding SC 2.5.7: Dragging Movements (WCAG 2.2, Level AA)",
        "checkedAt": "2026-09-16",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260916035006/https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html",
          "capturedAt": "2026-09-16T03:50:06Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html"
        }
      },
      {
        "id": "dnd-mdn",
        "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API",
        "title": "MDN · HTML Drag and Drop API",
        "checkedAt": "2026-09-16",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260922115357/https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API",
          "capturedAt": "2026-09-22T11:53:57Z",
          "lookupUrl": "https://web.archive.org/web/20260916*/https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API"
        }
      }
    ],
    "lists": [],
    "ordered": false,
    "listDisclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is."
  },
  "entry": {
    "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": [
      "dragging",
      "reordering",
      "drop zone",
      "pointer",
      "accessibility"
    ],
    "definition": "Pressing on an object, moving the pointer or finger to a target, and releasing to move, reorder, or deposit it: the object follows the pointer while it is being dragged and the regions that can accept it are marked.",
    "boundary": "Drag and drop is one technique within direct manipulation, not a synonym for it: direct manipulation also covers clicking, resizing, and editing in place. The test is that one continuous press–move–release decides the outcome. It demands more of the user than most interactions — holding and moving precisely at the same time is hard for people with tremor, operating one-handed, or using an alternative pointing device — so this entry treats an equivalent path that needs no dragging as a hard requirement rather than an optional enhancement.",
    "signature": [
      "Once pressed, the object follows the pointer as a visible drag image",
      "Regions that can accept the object are clearly marked while dragging",
      "Releasing completes it and leaving a valid region cancels it"
    ],
    "when": [
      "The spatial relationship between objects is part of the task, as in ordering or grouping",
      "The user needs to bring files from outside into the interface",
      "The destination is visible on screen and the distance is short"
    ],
    "when_not": [
      "Dragging is the only way to do something and no equivalent single-pointer path exists",
      "The list is long and reaching the destination requires scrolling while dragging",
      "The consequence of the drop is irreversible yet there is no confirmation and no undo"
    ],
    "tradeoff": "Spatial manipulation makes the destination obvious, at the cost of demanding fine motor control — and a drag leaves no restatable trace, so when it goes wrong users often cannot say where the thing ended up.",
    "comparison": {
      "focus": "Deciding where an object goes through one continuous spatial action",
      "mechanism": "Press, follow the pointer, release over a marked region",
      "cost": "It demands fine motor control and requires an equivalent path alongside"
    },
    "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": "The success criterion requires that all functionality using a dragging movement can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author. The document summarises the goal as not relying on dragging for user actions and providing a simple pointer alternative for any action that involves dragging, because some people cannot use a mouse to drag items. This entry takes the equivalent-path requirement from it.",
        "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": "The documentation explains that each drag-and-drop operation has an associated drag data store: the dragged data must be serialised to a string or a file and carries a type that defines how it should be interpreted; for default-draggable items such as images, links, and selections the browser defines the drag data, while custom draggable elements must have their data written by the author in the dragstart handler. This entry takes from it that a drag transfers data rather than the object itself; the documentation remains the reference for implementation.",
        "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": "The interface lets users act on objects on screen rather than through a form",
        "reason": "Drag and drop is one technique within direct manipulation, which also covers clicking, resizing, and editing in place.",
        "basis": "editorial"
      },
      {
        "target": "undo-redo",
        "kind": "composes_with",
        "condition": "A drop changes data and the user may release in the wrong place",
        "reason": "A drag leaves no restatable trace, so undo is the only reliable way back after a misplaced drop.",
        "basis": "editorial"
      },
      {
        "target": "fitts-law",
        "kind": "composes_with",
        "condition": "The drop target is small or far from the starting point",
        "reason": "A drag must stay on target throughout, so the smaller and further the target, the longer and more error-prone the drop becomes.",
        "basis": "editorial"
      },
      {
        "target": "perceivable-alternatives",
        "kind": "composes_with",
        "condition": "Dragging is currently the main way to perform some function",
        "reason": "An equivalent path that needs no dragging must exist — cut and paste, move up and down, or a menu that picks the destination.",
        "basis": "editorial"
      }
    ],
    "rules": [
      {
        "when": "The interface offers any function completed by dragging",
        "instruction": "Provide a single-pointer alternative that needs no dragging, unless dragging is essential to that function.",
        "strength": "must",
        "basis": "editorial"
      },
      {
        "when": "While a drag is in progress",
        "instruction": "Mark which regions can accept the object and where it will land, and make leaving a valid region cancel rather than snap to the nearest target.",
        "strength": "must",
        "basis": "editorial"
      }
    ],
    "behavior": {
      "states": [
        "idle",
        "dragging",
        "over-target",
        "dropped",
        "cancelled"
      ],
      "a11y": [
        "Every draggable function has a keyboard-reachable equivalent",
        "Starting a drag, entering a target, and completing are announced through status messages",
        "Droppable regions are distinguished by more than color, with a border or icon as well"
      ],
      "motion": "Following the pointer is feedback rather than decoration; extra animation such as spring-back is dropped under a reduced-motion preference"
    },
    "demo": null,
    "version": "0.1.0",
    "editorialStatus": "drafted",
    "requirements": [],
    "demoCapabilities": [],
    "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch of how the drag image relates to the drop region, not a verified implementation. Before shipping, confirm function by function that a non-dragging equivalent exists and test it with a keyboard and a screen reader.",
    "image": {
      "src": "/images/drag-and-drop.webp",
      "alt": "A fictional FIELDNOTES board sketch: across three colored columns, one card is lifted with a slight tilt and shadow and travels right along a curved arrow, the destination column outlined with a dashed border to mark it as droppable, and a pale gap left where the card came from."
    },
    "searchTerms": [
      "拖动",
      "排序",
      "放置区",
      "指针",
      "无障碍"
    ]
  }
}