--- id: html-drag-and-drop title: "HTML Drag and Drop" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["Drag and Drop API", "draggable attribute", "dataTransfer", "ondragstart", "ondrop", "HTML5 drag and drop"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.89 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["html", "web", "frontend", "w3schools", "drag-and-drop", "api", "html5"] raw_sources: ["https://www.w3schools.com/html/html5_draganddrop.asp"] applied_in: [] github_commit: "" --- # [[HTML Drag and Drop]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) The HTML Drag and Drop API lets an element be dragged and dropped by marking it `draggable="true"` and wiring `ondragstart`, `ondragover`, and `ondrop` handlers that pass data through the `dataTransfer` object. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **Drag and Drop API** β€” enables an element to be dragged and dropped, a common interaction where users grab an object and move it elsewhere. [S1] - **`draggable="true"`** β€” the attribute that makes an element draggable. [S1] - **`dataTransfer`** β€” the object that carries data between the drag source and drop target via `setData()` / `getData()`. [S1] - **Default targets reject drops** β€” elements cannot receive drops by default; you must call `preventDefault()` in the dragover handler to allow a drop. [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **`ondragstart` + `setData()`** β€” when dragging starts, store the data type and the dragged element's value. [S1] - **`ondragover` + `preventDefault()`** β€” allow dropping by preventing the default behavior that blocks it. [S1] - **`ondrop` + `getData()` + `appendChild()`** β€” on drop, retrieve the data using the same type used in `setData()`, then move the element into the drop target. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) **What it is** The HTML Drag and Drop API enables an element to be dragged and dropped. Browser support begins with Chrome 4.0, Internet Explorer 9.0, Firefox 3.5, Safari 6.0, and Opera 12.0. [S1] **Make an element draggable** Set the `draggable` attribute to `true`: [S1] ```html ``` or ```html

Draggable text

``` **Complete example** ```html
``` **The events explained** - **`ondragstart` and `setData()`** β€” the `dataTransfer.setData()` method sets the data type and the value of the dragged data. [S1] - **`ondragover`** β€” by default, elements cannot receive drops. To allow a drop, call `preventDefault()` in the dragover handler. [S1] - **`ondrop`** β€” when the dragged data is dropped, retrieve it via `dataTransfer.getData()` using the same type that was specified in `setData()`. The example then appends the dragged element into the drop target. [S1] ## πŸ› οΈ 적용 사둀 (Applied in summary) The complete example above is the canonical applied case: dragging an `` into a `
` drop zone. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Drag start β€” store the id (JavaScript): ```javascript function dragstartHandler(ev) { ev.dataTransfer.setData("text", ev.target.id); } ``` Allow drop (JavaScript): ```javascript function dragoverHandler(ev) { ev.preventDefault(); } ``` Perform drop β€” move the element (JavaScript): ```javascript function dropHandler(ev) { ev.preventDefault(); const data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } ``` ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) No contradictions found in the source. Note the non-obvious requirement: a drop target rejects drops unless `preventDefault()` is called in its dragover handler. [S1] ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual (μ‹€μ œ 적용 사둀 발견 μ‹œ applied/validated둜 승격 κ°€λŠ₯) - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.89 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[HTML Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[HTML Web APIs]], [[HTML Geolocation]], [[HTML Web Storage]], [[HTML Web Workers]] - **μ°Έμ‘° λ§₯락:** Referenced whenever building interactive UIs where users rearrange or move elements directly. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” HTML Drag and Drop β€” https://www.w3schools.com/html/html5_draganddrop.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "HTML Drag and Drop" page (Astra wiki-curation, P-Reinforce v3.1 format).