[javascript] PhotoSwipe를 이용한 이미지 드래그 앤 드롭 기능 구현 방법

22 Nov 2023

javascript

개요

이미지 갤러리와 같이 다중 이미지를 터치하여 드래그 앤 드롭 기능을 구현하고 싶은 경우, PhotoSwipe 라이브러리를 사용할 수 있습니다. PhotoSwipe는 JavaScript를 기반으로 한 이미지 및 동영상 갤러리 라이브러리로, 모바일 및 데스크탑 환경에서 사용할 수 있습니다.

이번 글에서는 PhotoSwipe를 이용하여 이미지 드래그 앤 드롭 기능을 구현하는 방법을 알아보겠습니다.

구현 방법

PhotoSwipe 라이브러리 다운로드 및 프로젝트에 추가하기 먼저, PhotoSwipe 라이브러리를 다운로드 받고 프로젝트에 추가해야 합니다. 다음의 링크에서 최신 버전을 다운로드 받으실 수 있습니다: PhotoSwipe 다운로드 링크
HTML 구조 설정하기 드래그 앤 드롭 기능을 적용할 이미지를 HTML 문서에 추가합니다. 예시 코드는 다음과 같습니다:
```
<div class="gallery">
  <figure>
    <a href="path_to_image.jpg" data-size="1200x800">
      <img src="path_to_thumbnail.jpg" alt="Image 1">
    </a>
  </figure>
  <figure>
    <a href="path_to_image.jpg" data-size="1200x800">
      <img src="path_to_thumbnail.jpg" alt="Image 2">
    </a>
  </figure>
</div>
```
gallery 클래스는 갤러리의 컨테이너 역할을 합니다. figure 요소는 각 이미지를 감싸고, a 요소는 이미지 링크를 설정합니다. href 속성은 원본 이미지 경로를, data-size 속성은 원본 이미지의 크기를 지정합니다. img 요소는 썸네일 이미지를 설정하며, alt 속성은 대체 텍스트를 지정합니다.
PhotoSwipe 초기화하기 자바스크립트 코드를 사용하여 PhotoSwipe를 초기화합니다. 예시 코드는 다음과 같습니다:
```
var pswpElement = document.querySelectorAll('.pswp')[0];

var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, images, options);
gallery.init();
```
pswpElement 변수는 PhotoSwipe의 컨테이너 역할을 하는 요소를 선택합니다. images 변수에는 이미지의 경로와 크기 정보가 들어가야 합니다. options 변수는 PhotoSwipe의 동작을 설정합니다.

참고: PhotoSwipeUI_Default는 PhotoSwipe의 사용자 인터페이스(버튼, 캡션 등)를 포함한 기본 옵션을 제공합니다. 원하는 UI 테마를 사용하고 싶은 경우 해당 테마를 찾아서 사용하시면 됩니다.
드래그 앤 드롭 기능 적용하기 PhotoSwipe 라이브러리는 기본적으로 이미지 드래그 앤 드롭 기능을 지원합니다. 사용자는 터치나 마우스로 이미지를 드래그하여 다른 위치로 이동시킬 수 있습니다.

이로써, 이미지 드래그 앤 드롭 기능을 사용할 수 있는 PhotoSwipe 구현이 완료되었습니다.

개요

구현 방법

참고 자료