1. Drag and Drop API
ㅇ HTML 요소 또는 로컬 파일을 마우스로 끌어서, 움직이거나 다른 HTML 요소로 이동시킬 수
있는 데이터 전달 기능
ㅇ draggable 속성에 "true" 또는 "false" 지정하면 됨
<div draggable="true">드래그 가능</div>
- href 속성 있는 a 요소, src 속성 있는 img 요소는 기본적으로 드래그 가능
2. Drag and Drop 이벤트
ㅇ (대상 요소 : 드래그 되는 요소)
- dragstart : 드래그를 시작할 때 발생
- drag : 드래그 동안 주기적으로 발생
- dragend : 드래그가 끝날 때 발생
ㅇ (대상 요소 : 드롭 받는 요소)
- dragenter : 마우스가 드롭 요소 안에 진입할 때 발생
- dragover : 마우스가 드롭 요소 위에 있는 동안 발생
- dragleave : 마우스가 드롭 요소 밖으로 나갈 때 발생
- drop : 요소에 드롭할 때 발생
. 한편, drop 이벤트 처리기 내에서는, 기본 동작 취소 필요
.. 왜냐하면, 링크,파일이 드롭되면 웹브라우저는 기본적으로 그것을 보여주려고 하기 때문
3. DataTransfer 객체 ☞ MDN dataTransfer 참조
ㅇ 위 Drag and Drop 이벤트에, 데이터 전달 기능을 주기 위해,
- 그 속성(Property)으로써, DataTransfer 객체를 갖음
ㅇ 이 객체의 유효 범위 : Drag and Drop 이벤트 핸들러 내
ㅇ 프로퍼티
- types, files (드래그하는 File 객체 목록), dropEffect, effectAllowed 등
ㅇ 2개 주요 메소드 : getData(type), setData(type,data)
- type 유형 : "text/plain", "text/html", "text/url-list"