[javascript] 터치 이벤트를 사용하여 드래그 시 터치된 엘리먼트를 따라 움직이는 방법은?

12 Dec 2023

javascript

먼저, 터치 이벤트에 대한 EventListener를 등록합니다.

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

let startX, startY, offsetX, offsetY;

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

draggableElement.addEventListener('touchmove', (e) => {
  e.preventDefault();
  if (startX !== undefined && startY !== undefined) {
    const touch = e.targetTouches[0];
    const dx = touch.clientX - startX;
    const dy = touch.clientY - startY;
    draggableElement.style.left = offsetX + dx + 'px';
    draggableElement.style.top = offsetY + dy + 'px';
  }
});

draggableElement.addEventListener('touchend', () => {
  startX = undefined;
  startY = undefined;
});

위 코드에서는 touchstart 이벤트가 발생했을 때 초기 터치 위치와 드래그 대상 엘리먼트의 초기 위치를 저장하고, touchmove 이벤트가 발생했을 때 터치의 변화량을 계산하여 엘리먼트를 움직입니다. 마지막으로 touchend 이벤트가 발생했을 때 초기 터치 위치를 초기화하여 드래그가 종료됨을 알립니다.

이 코드를 사용하면 터치된 엘리먼트를 드래그할 수 있게 됩니다.