[javascript] 자바스크립트에서 터치 이벤트를 사용하여 드래그 앤 드롭 기능을 구현하는 방법은?

12 Dec 2023

javascript

먼저, 드래그 앤 드롭을 적용할 HTML 요소를 선택합니다.

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

다음으로, 터치 이벤트를 처리하여 드래그 앤 드롭 이벤트를 구현합니다.

let startX, startY, offsetX, offsetY;

draggableElement.addEventListener('touchstart', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
  offsetX = parseFloat(window.getComputedStyle(draggableElement).left);
  offsetY = parseFloat(window.getComputedStyle(draggableElement).top);
});

draggableElement.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  const deltaX = touch.clientX - startX;
  const deltaY = touch.clientY - startY;
  draggableElement.style.left = offsetX + deltaX + 'px';
  draggableElement.style.top = offsetY + deltaY + 'px';
});

draggableElement.addEventListener('touchend', (e) => {
  e.preventDefault();
  // 드래그 앤 드롭 이벤트 종료 처리
});

이렇게 하면 draggableElement를 터치하여 드래그할 수 있으며, 터치 이벤트를 통해 이동한 위치에 해당 요소가 이동하게 됩니다. 이 코드는 간단한 예시이며, 좀 더 복잡한 처리가 필요할 수 있습니다.