[HTML, JavaScript] 드래그 앤 드롭(Drag and Drop) 이벤트 알아보기 [JS 이벤트]

드래그 앤 드롭이란?

draggable 가능한 요소를 마우스로 클릭하여 드래그하고 마우스 버튼을 떼면서 요소를 드롭하는 것을 드래그 앤 드롭 기능이라고 한다. 

마우스 클릭

마우스 드래그

마우스 드롭

 

드래그 앤 드롭 속성

draggable

<div draggable="true" class="item">
	<span> Item1 </span>
</div>

먼저 HTML에서 요소가 드래그 이벤트를 받기 위해선 draggable 속성이 true 값을 가져야 한다.

※ 태그 중에 기본적으로 draggable이 true인 값은 대표적으로 <a>태그가 있다. 반면에 <span>태그는 드래그가 불가능 하다.

 

드래그 앤 드롭 이벤트 종류

dragstart

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

item.addEventListener("dragstart", e => {
	console.log(e.target); // 드래그를 시작한 요소가 콘솔에 출력된다.
}

드래그가 시작되는 순간에 콜백함수가 실행된다.

 

drag

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

item.addEventListener("drag", (e) => {
  console.log(e.target); //드래그 중인 요소가 콘솔에 출력된다.
});

드래그를 하면 계속해서 콜백함수가 실행된다.

 

dragenter

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

container.addEventListener("dragenter", (e) => {
  console.log(e.target); // container 영역에 drag요소가 닿을 경우 콘솔에 container 요소가 출력된다.
});

dragenter 이벤트를 적용한 요소에 드래그한 아이템이 닿을 경우 콜백함수가 실행된다. 

 

dragstart

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

containe.addEventListener("dragover", (e) => {
  console.log(e.target); // container 영역에 drag요소가 위치하면 계속해서 콜백함수가 실행되어 콘솔에 container 요소가 출력된다.
});

dragover 이벤트를 적용한 요소에 드래그한 아이템이 위치하면 계속해서 콜백함수가 실행된다.

 

dragleave

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

container.addEventListener("dragleave", (e) => {
  e.preventDefault();
  console.log(e.target); // 드래그 중인 요소가 자신을 감싸고 있던 영역을 벗어 났을 때 콜백함수가 실행된다.
});

드래그 중인 요소가 자신을 감싸고 있던 영역을 벗어 났을 때 콜백함수가 실행된다. 
e.preventDefault()를 사용하면 이벤트 동작이 겹치는 것을 방지할 수 있다.

 

drop

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

container.addEventListener("dragover", (e) => {
  e.preventDefault();
  console.log(e.target);
});

container.addEventListener("drop", (e) => {
  e.preventDefault();
  console.log(e.target);
});

drop 이벤트를 적용한 요소에 드래그를 끝내면 콜백함수가 실행된다.
drop 이벤트는 dragover과 같이 사용해야 동작한다.
e.preventDefault()를 사용하지 않으면 드래그를 끝낼 시에 에러가 발생할 수 있다.

 

dragend

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

item.addEventListener("dragend", (e) => {
  console.log(e.target) // 드래그가 끝날 때 콜백함수가 실행된다.
});

드래그를 끝낼 시에 콜백함수가 실행된다.

 

출처

🌐 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기 (tistory.com)

🌐 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기