Files

T

Antigravity Agent 1cfd3bbb56 docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고,
Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.

2026-07-05 00:10:59 +09:00

5.2 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

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]

<img id="img1" draggable="true">

<p id="p1" draggable="true">Draggable text</p>

Complete example

<!DOCTYPE HTML>
<html>
<head>
<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<img id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">

</body>
</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 <img> into a <div> drop zone. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Drag start — store the id (JavaScript):

function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

Allow drop (JavaScript):

function dragoverHandler(ev) {
  ev.preventDefault();
}

Perform drop — move the element (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).

5.2 KiB Raw Blame History