HTML과 JavaScript에서의 드래드롭은 이벤트 기반으로 작동하게 되는데 마우스 커서로 객체를 드래그해서 놓을 때까지 여러 단계의 이벤트가 순차적으로 발생하게 되어 동작이 완료된다.
드래그 드롭 이벤트 종류
- dragstart: 사용자가 객체를 드래그하려고 시작할 때 발생
- drag: 대상 객체를 드래그하면서 마우스를 움직일 때 발생
- dragenter: 마우스가 대상 객체의 위로 처음 진입할 때 발생
- dragover: 드래그하면서 마우스가 대상 객체의 영역 위에 자리 잡고 있을 때 발생
- drop: 드래그가 끝나서 드래그하던 객체를 놓는 장소에 위치한 객체에서 발생. 리스너는 드래그된 데이터를 가져와서 드롭 위치에 놓는 역할
- dragleave: 드래그가 끝나서 마우스가 대상 객체의 위에서 벗어날 때 발생
- dragend: 대상 객체를 드래그하다가 마우스 버튼을 놓는 순간 발생
⚠️ 이중 drop, dragover 이벤트는 필수로 사용해야하는 이벤트이다. dragover 이벤트를 적용하지 않으면 drop이벤트가 작동하지 않는다.
⭐ 기본적으로 HTML요소는 다른 요소의 위에 위치할 수 없다. 따라서 다른 요소 위에 위치할 수 있도록 만들기 위해서는 놓일 장소에 있는 요소의 기본 동작을 막아야한다. 이 작업은 event.preventDefault() 메소드를 호출하여 설정할 수 있다.
