웹 페이지에서는 기본적으로 text, image, link를 제외한 요소는 드래그 이벤트가 발생하지 않는다.
그래서 다른 요소에 드래그 이벤트를 동작시키고 싶다면 해당 요소의 draggable 속성을 true로 설정해야 한다.
이벤트 종류
-
drag
요소를 드래그할 때 발생한다. -
dragend
드래그를 끝냈을 때 발생한다. -
dragenter
드래그한 요소가 드롭 대상 위에 올라갔을 때 발생한다. -
dragleave
드래그한 요소가 드롭 대상에서 벗어났을 때 발생한다. -
dragover
드래그한 요소가 드롭 대상 위로 지나갈 때 발생한다. -
dragstart
드래그를 시작했을 때 발생한다. -
drop
드래그한 요소를 드롭 대상에 드롭했을 때 발생한다.
Droppable
드래그한 요소는 아무 요소에나 드롭할 수는 없고,
Droppable한 요소에만 드롭할 수 있다.
-
Droppable한 요소란,ondragover와ondrop이벤트 핸들러가 정의되어있는 요소를 말한다. -
Element.addEventListener()함수를 이용해dragover와drop이벤트를 구현하면 된다. -
drop이벤트의 경우dragenter와dragover이벤트를 차단해야 하므로, 보통 핸들러에서e.preventDefault()를 이용해 다른 이벤트를 차단한다.
DataTransfer
DataTransfer는 드래그 드롭 이벤트 중에 필요한 데이터를 저장하는 객체다.
-
모든 드래그 이벤트에서
dataTransfer속성으로 접근이 가능하다. -
dataTransfer.setData(string, value)메서드를 이용해서 값을 저장한다.stinrg이key에 해당한다. -
dataTransfer.getData(string)메서드를 이용해서 값을 가져온다.
참고 자료
Drag Operations | MDN
HTML Drag and Drop | MDN
DataTransfer | MDN
