기본적으로 드래그 이벤트를 사용할려면 엘리먼트 속성에 draggable을 설정해야한다.
drag, dragover 이벤트는 필수로 사용해야 하는 이벤트이다.
dragstart - 드래그가 시작되는 순간 발생
drag - 요소를 드래그 할 때 발생, 드래그시 연속적으로 발생 => 디바운싱 / 쓰로틀링을 이용한 구분이 좋아보임.
dragenter - 드래그하는 요소가 해당 이벤트를 달아놓은 요소안에 진입시 발생
dragover - 해당 이벤트 요소위에 드래그 요소가 있을시
dragleave - dragexit대신 사용, 해당 이벤트 요소에 들어갔다가 나가는 시점 발생, enter와 동작 겹칠수있기에 preventdefault사용
drop - 해당 이벤트 요소에 드래그를 끝내면 발생(dragover랑 같이사용, preventdefault사용)
dragend - 요소의 드래그가 끝날 때 발생
dataTransfer 객체 - 드래그 앤 드롭 이벤트는 모두 해당 객체를 반환하며, 해당 동작에 관한 정보를 가지고 있다.
(e)=>{ console.log(e.dataTransfer) }
파일 드래그 드롭시 파일에 대한 정보를 가져올수 있다.
드래그 드롭 정렬 라이브러리 - Sortable.js
파일 드래그 드롭 - Dropzone.js