끌어서 놓기: Drag & Drop

핵심 개념

마우스로 아이콘을 잡아서 다른 곳으로 옮기는 기능을 웹사이트에서도 아주 쉽게 만들 수 있어요.

코드 분석

HTML5📋 코드 (17줄)

<style>
  #drag1 { width: 80px; height: 80px; background: #facc15; cursor: move; display: flex; align-items: center; justify-content: center; font-weight: bold; }
  #drop { width: 150px; height: 150px; border: 3px dashed #666; margin-top: 20px; display: flex; align-items: center; justify-content: center; }
</style>
<div id='drag1' draggable='true' ondragstart='drag(event)'>DOGE</div>
<div id='drop' ondrop='drop(event)' ondragover='allowDrop(event)'>여기에 놓으세요</div>
<script>
  function allowDrop(ev) { ev.preventDefault(); }
  function drag(ev) { ev.dataTransfer.setData('text', ev.target.id); }
  function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData('text'); 
    var draggedElement = document.getElementById(data);
    ev.target.innerHTML = ''; 
    ev.target.appendChild(draggedElement);
  }
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 HTML5 드래그앤드롭 코드의 dragstart/dragover/drop
이벤트 처리 버그와 모바일 미동작 문제를 찾아 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

Drag & Drop API로
트렐로 스타일 칸반 보드를
실전 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 드래그 앤 드롭 구현을 분석해서
모바일 호환, 터치 이벤트 폴백,
접근성(키보드 조작)을 종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 실무에서 HTML5 네이티브 D&D vs
react-dnd, dnd-kit 같은 라이브러리가
각각 언제 적합한지 솔직히 알려줘.

⭐ 이것만 기억하세요

끌어서 놓기: Drag & Drop는 이 3가지만 확실히 잡으세요

1.draggable 속성만 추가하고 이벤트 핸들러를 연결하지 않으면 요소가 움직이기만 하고 놓을 곳을 인식 못 합니다

2.dragstart에서 데이터를 설정하고, dragover에서 기본 동작을 막고, drop에서 데이터를 받는 3단계가 핵심입니다

3.다음 챕터에서 사용자 데이터를 브라우저에 영구 저장하는 Local Storage를 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.17 — 질문하거나 답변을 확인하세요

→

진행도 17 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)