Drag Event에서 dataTransfer로 데이터 전달하기

Drag 이벤트에서는 dataTransfer라는 특수한 객체를 사용할 수 있는데, 이를 통해서 드래그 되었을 때 값을 저장하고 해당 값을 전달할 수 있게 해준다.

 

이를 사용해서 drag & drop으로 랜덤 숫자를 생성하는 예제를 만들어 보았다.

 

<div>
  <div class="drag-div" draggable=true>Drag And Get Random Number</div>
  <div class="drop-div">
    <span>Number :</span>
    <span class="insertion"></span>
  </div>
</div>

위의 Drag And Get Random Number를 드래그할 수 있게 설정한다.

그리고 드래그하여 하단의 Number에 드랍하면, 랜덤 숫자를 화면에 띄울 수 있게 한다.

.drag-div {
  padding: 10px;
  background-color: #ccc;
  width: fit-content;
}

.drop-div {
  margin-top: 50px;
  padding: 10px;
  background-color: #000;
  color: #fff;
  width: fit-content;
}

보기 좋게 CSS를 설정한다.

const dragDiv = document.querySelector(".drag-div");
const dropDiv = document.querySelector(".drop-div");

dragDiv.addEventListener("dragstart", (e) => {
  const random = Math.floor(Math.random() * 100);
  event.dataTransfer.setData('num', random);
})

dropDiv.addEventListener("dragover", (e) => {
  e.preventDefault(); // 필수!
});

dropDiv.addEventListener("drop", (e) => {
  e.preventDefault();
  const spanInsertion = dropDiv.querySelector(".insertion");
  spanInsertion.innerText = e.dataTransfer.getData("num");
});

그리고 자바스크립트 코드이다.

드래그가 시작될 때, 이벤트의 dataTransfer에 데이터를 key-value 형식으로 저장한다.

그리고 drop하였을 때 dataTransfer에서 데이터를 가져와 서로 다른 div간의 데이터 전달을 드래그를 통해 구현할 수 있다.

❄️ drop 과정에서 dragover 이벤트를 제거하지 않으면, drop 이벤트가 정상적으로 이루어지지 않는다.

 

 

https://developer.mozilla.org/ko/docs/Web/API/DataTransfer

DataTransfer - Web API | MDN