[2022.04.25] 자바스크립트 드래그 앤 드롭 이벤트 API 정리

REASON·2022년 4월 25일

STUDY

목록 보기

26/127

드래그&드롭을 구현하고 싶은데 마음처럼 잘 안돼서 이번에 공부겸 정리하면서 개념을 이해하고자 한다.

HTML 드래그 앤 드롭 API

draggable 요소를 마우스로 선택해 droppable요소로 드래그 후
마우스 버튼에서 손을 떼면 요소가 드롭된다.
드래그하는 동안은 draggable 요소는 반투명한 상태로 마우스 포인터를 따라가는 것이 특징이다.

드래그 관련 이벤트

이벤트	핸들러	설명
drag	ondrag	요소를 드래그할 때 발생
dragend	ondragend	요소의 드래그가 끝날때 발생(마우스 버튼을 놓으면)
dragenter	ondragenter	해당 이벤트를 지정한 요소에 드래그한 아이템이 들어가면 발생
dragexit	ondragexit	잘 안쓰이는듯
dragleave	ondragleave	dragexit대신 사용. 이 이벤트가 달린 요소에서 드래그가 떠나면 발생
dragover	ondragover	이 이벤트가 달린 요소에 드래그가 이루어지면 발생
dragstart	ondragstart	드래그가 시작되는 순간 발생
drop	ondrop	이 이벤트가 달린 요소에 드래그를 끝내면 발생 (dragover랑 같이 써야함)

요소가 드래그 이벤트가 발생할 수 있도록
해당 요소의 속성으로 draggable="true"값을 주고 시작하면 된다.

1. drag

<div draggable="true" class="item">
  <p>🌸 드래그용 아이템 🌸</p>
</div>

const item = document.querySelector(".item");

item.addEventListener("drag", (e) => {
  console.log(e);
  console.log("드래그하면 발생하는 이벤트");
});

드래그 이벤트를 테스트해볼 요소를 하나 만들고 이벤트 리스너를 달았다.

드래그 하는 중에 계속 이벤트가 실행되는 것을 확인할 수 있었다.

2. dragend

dragend이벤트는 드래그를 시작하거나 진행중일때는 발생하지 않고
사용자가 마우스 클릭 버튼을 놓았을 때 발생하는 이벤트이다.

3. dragenter

드래그하는 요소가 dragenter 이벤트를 달아놓은 요소 안에 진입했을 때 발생한다.

4. dragexit

dragleave로 대신 사용하는 것 같아서 생략

5. dragleave

어떤 요소든 드래그되고 있다면 이 이벤트가 달린 요소에 들어갔다가 나가는 시점에 발생하는 이벤트이다.

6. dragover

dragover이벤트가 달려있는 요소 안에서 어떠한 요소든 드래그가 이루어지고 있다면 발생하는 이벤트이다.

7. dragstart

드래그가 시작되는 순간 발생한다.

8. drop

드롭될 요소에는 preventDefault()를 사용하지 않으면 정상적인 동작이 되지 않을 수 있으므로
이벤트에 preventDefault() 코드를 작성하는 것이 좋다.
단독으로 사용했을 때는 동작을 하지 않았고 dragover이벤트와 함께 사용했을 때 비로소 동작을 했다.