[javascript] DOM 요소 드래그 앤 드롭하기

12 Dec 2023

javascript

웹 애플리케이션에서 DOM 요소를 드래그하여 다른 위치로 이동시키는 드래그 앤 드롭 기능은 사용자 경험을 향상시키는 데 도움이 됩니다. JavaScript를 사용하여 이 기능을 구현하는 방법에 대해 알아보겠습니다.

HTML 구조 설정

우선, 드래그 앤 드롭을 적용할 DOM 요소를 HTML에 추가합니다.

<div id="draggable" draggable="true">
  드래그할 요소
</div>

<div id="droppable">
  드롭할 위치
</div>

여기서 draggable 속성을 true로 설정하여 해당 요소를 드래그 가능하게 만듭니다.

JavaScript로 이벤트 처리

이제 JavaScript를 사용하여 이벤트 처리를 통해 드래그 앤 드롭 기능을 추가합니다.

const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.ondragstart = (event) => {
  event.dataTransfer.setData('text/plain', event.target.id);
};

droppable.ondragover = (event) => {
  event.preventDefault();
};

droppable.ondrop = (event) => {
  const id = event.dataTransfer.getData('text/plain');
  const draggableElement = document.getElementById(id);
  droppable.appendChild(draggableElement);
  event.dataTransfer.clearData();
};

이 코드는 ondragstart, ondragover, ondrop 이벤트를 사용하여 드래그 앤 드롭 기능을 구현합니다. 먼저, 드래그를 시작할 때 데이터를 설정하고, 드롭 가능한 영역 위로 드래그하는 동작을 허용하며, 드롭할 때 요소를 이동시킵니다.

이제 웹 애플리케이션에 드래그 앤 드롭 기능을 적용할 수 있습니다. 사용자는 draggable 요소를 드래그하여 droppable 영역으로 이동시킬 수 있게 될 것입니다.

결론

이렇게하여 웹 애플리케이션에서 DOM 요소의 드래그 앤 드롭 기능을 구현할 수 있습니다. 사용자는 이 기능을 통해 콘텐츠를 쉽게 이동시키고 조작할 수 있으며, 이는 편리한 경험을 제공합니다.

참고문헌

MDN Web Docs. “Drag Operations”. https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event