Files

T

koriweb 9609c04755 docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-23 19:21:18 +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