[VanillaJS] TodoList Drag & Drop 이벤트 처리

❗❗  데브코스 32일차 (09.14)

오늘 주제는 Drag&Drop 이벤트 처리에 대해서 학습을 진행했다.

웹사이트를 이용하게 되면 Drag&Drop을 많이 사용해봤을 것이다.

 

예를들어 이미지를 옮기거나 폴더에서 파일을 옮길때도 Drag&Drop 이벤트가 발생하고,

Notion(노션)을 사용할때도 자유롭게 Drag&Drop을 이용해서 컨텐츠 정보 위치를 바꾼다.

위의 예시들은 모두 구현 방법은 제각각이지만, 원리는 동일할 것이다.

 

여러가지 옵션이 있지만 해당 로직에서는 크게 3가지를 통해 구현했다.

1. dragstart - Drag를 시작했을 때 발생하는 이벤트

$이벤트대상.addEventListener("dragstart", (e) => {
	//drag 처리할 대상 DOM
    const $li = e.target.closest("li");
    //drag 이벤트의 상태를 담음 key, value
    e.dataTransfer.setData("todoId", $li.dataset.id);
  });

dataTransfer는 drag 이벤트의 상태를 담고있는 인터페이스이다.

 

2. dragover - Drag 요소가 움직일 때 발생하는 이벤트

  $이벤트대상.addEventListener("dragover", (e) => {
  	//이벤트 발생 중지
    e.preventDefault();
    //작업의 유형타입 지정 (move, copy, copyLink 등)
    e.dataTransfer.dropEffect = "move";
  });

옮기는 도중에 이벤트가 발생하지 않도록 처리하고 move 상태값으로 지정해준다.

 

3. drop - Drop을 했을 때 발생하는 이벤트 (drag가 끝났을 때)

  $이벤트대상.addEventListener("drop", (e) => {
    e.preventDefault();
    //위에서 지정한 key값으로 getDate 수행
    const dropeedTodoId = e.dataTransfer.getData("todoId");
    ~~원하는 로직 수행
  });

대략적으로 위의 3단계를 수행하여 Drag&Drop 이벤트를 처리한다. 자세한건 MDN 문서를 보면 된다.

 

 

📖 학습한 내용

• VanillaJS
  • Drag & Drop 이벤트 처리