[JS] 드래그(drag) 앤 드롭(drop) 이벤트

📌 드래그(drag) 앤 드롭(drop) 이벤트

 

 

darggable 속성

: HTML 요소가 드래그 가능하도록 설정

• "true": 드래그 ⭕
• "false": 드래그 ❌ (기본값)

<div id="drag-item" draggable="true">
  Drag me!
</div>

 

 

---

dragstart

: 드래그를 시작할 때 발생 

document.addEventListener('dragstart', (event) => {
  console.log('Drag started');
  event.dataTransfer.setData('Dragged data');
});

 

 

 

drag

: 드래그 중에 계속 발생

document.addEventListener('drag', (event) => {
  console.log('Dragging');
});

 

 

 

dragend

: 드래그가 끝날 때 발생

document.addEventListener('dragend', (event) => {
  console.log('Drag ended');
});

 

 

 

dragover

: 드래그된 요소가 드롭 대상 위를 지나갈 때 발생

• 드롭을 허용하기 위해서는 e.preventDefault()를 호출해야 함 

dropTarget.addEventListener('dragover', (event) => {
  event.preventDefault(); // 드롭을 허용
  console.log('Drag over');
});

 

 

 

dragenter

: 드래그된 요소가 드롭 영역에 들어왔을 때 발생

dropTarget.addEventListener('dragenter', (event) => {
  console.log('Drag entered');
});

 

 

 

dragleave

: 드래그된 요소가 드롭 영역에서 나갔을 때 발생

dropTarget.addEventListener('dragleave', (event) => {
  console.log('Drag left');
});

 

 

 

drop

: 드래그된 요소를 드롭 대상에 놓았을 때 발생

dropTarget.addEventListener('drop', (e) => {
  e.preventDefault(); // 기본 동작 방지
  
  const data = event.dataTransfer.getData('text/plain');
  console.log('Dropped data:', data);
});

 

 

---

 

Document: drag 이벤트 - Web API | MDN

 

 

HTML 드래그 앤 드롭 API - Web API | MDN

 

draggable - HTML: Hypertext Markup Language | MDN

 

Document: dragstart 이벤트 - Web API | MDN

 

Document: dragend 이벤트 - Web API | MDN

 

HTMLElement: dragover event - Web APIs | MDN

 

HTMLElement: dragenter event - Web APIs | MDN

 

HTMLElement: dragleave event - Web APIs | MDN

 

HTMLElement: drop event - Web APIs | MDN