Drag & Drop - Basics

기본적으로 드래그 이벤트를 사용할려면 엘리먼트 속성에 draggable을 설정해야한다.

Events

drag, dragover 이벤트는 필수로 사용해야 하는 이벤트이다.

1. dragstart - 드래그가 시작되는 순간 발생

2. drag - 요소를 드래그 할 때 발생, 드래그시 연속적으로 발생 => 디바운싱 / 쓰로틀링을 이용한 구분이 좋아보임.

3. dragenter - 드래그하는 요소가 해당 이벤트를 달아놓은 요소안에 진입시 발생

4. dragover - 해당 이벤트 요소위에 드래그 요소가 있을시

5. dragleave - dragexit대신 사용, 해당 이벤트 요소에 들어갔다가 나가는 시점 발생, enter와 동작 겹칠수있기에 preventdefault사용

6. drop - 해당 이벤트 요소에 드래그를 끝내면 발생(dragover랑 같이사용, preventdefault사용)

7. dragend - 요소의 드래그가 끝날 때 발생

---

DataTransfer

dataTransfer 객체 - 드래그 앤 드롭 이벤트는 모두 해당 객체를 반환하며, 해당 동작에 관한 정보를 가지고 있다.

1. setData
2. getData
3. clearData
4. types

(e)=>{ console.log(e.dataTransfer) }

파일 드래그 드롭시 파일에 대한 정보를 가져올수 있다.

• setDragImage()
  거스트 드래그 고스트 이미지 => 드래그시 해당 엘리먼트 대신 사용자 설정 이미지가 드래그 될 수 있음.

---

Useful Libraries

드래그 드롭 정렬 라이브러리 - Sortable.js

파일 드래그 드롭 - Dropzone.js