[javascript] 자바스크립트로 웹 페이지에서 드래그 앤 드롭 기능을 사용하여 슬라이드 쇼 구현 방법

29 Nov 2023

javascript

드래그 앤 드롭 기능은 웹 페이지에서 유저가 요소를 드래그하여 원하는 위치에 놓을 수 있는 기능을 제공합니다. 이 기능을 활용하여 슬라이드 쇼를 구현할 수 있습니다.

HTML 구조 설정

먼저, 슬라이드 쇼를 표현할 HTML 구조를 설정해야 합니다. 각각의 슬라이드는 <div> 요소로 표현하고, 슬라이드를 담을 컨테이너 역할을 하는 <div> 요소도 함께 생성합니다. 아래는 간단한 HTML 구조 예시입니다.

<div id="slideshow-container">
  <div class="slide">슬라이드 1</div>
  <div class="slide">슬라이드 2</div>
  <div class="slide">슬라이드 3</div>
</div>

슬라이드 이동 기능 추가

이제 자바스크립트를 사용하여 슬라이드 쇼의 드래그 앤 드롭 기능을 구현해보겠습니다. 먼저, 슬라이드를 이동하는 함수를 작성합니다.

function moveSlide(slide, position) {
  slide.style.transform = `translateX(${position}px)`;
}

위 함수는 슬라이드 요소와 이동할 위치를 인자로 받아 해당 슬라이드를 움직이는 역할을 합니다.

드래그 앤 드롭 이벤트 처리

이제 드래그 앤 드롭 이벤트를 처리하는 코드를 작성할 차례입니다. 슬라이드 컨테이너 요소에 mousedown, mousemove, mouseup 이벤트를 등록하여 드래그 앤 드롭 동작을 구현합니다.

const slideshowContainer = document.getElementById('slideshow-container');
let isDragging = false;
let startX = 0;
let offset = 0;

slideshowContainer.addEventListener('mousedown', e => {
  isDragging = true;
  startX = e.clientX;
  offset = 0;
});

slideshowContainer.addEventListener('mousemove', e => {
  if (!isDragging) return;

  const currentX = e.clientX;
  offset = currentX - startX;
  const slides = document.getElementsByClassName('slide');
  
  for (let i = 0; i < slides.length; i++) {
    moveSlide(slides[i], offset);
  }
});

slideshowContainer.addEventListener('mouseup', () => {
  isDragging = false;
});

위 코드는 마우스를 누를 때(mousedown), 마우스를 움직일 때(mousemove), 마우스를 뗄 때(mouseup) 각각의 이벤트 핸들러를 등록합니다. 마우스를 누를 때는 드래그 앤 드롭을 시작하고, 움직일 때는 슬라이드를 이동시키는 moveSlide 함수를 호출합니다. 마우스를 떼면 드래그 앤 드롭을 종료합니다.

HTML 구조 설정

슬라이드 이동 기능 추가

드래그 앤 드롭 이벤트 처리

참고 자료