[javascript] 드래그 앤 드롭 기능을 사용한 웹사이트에서 이미지 갤러리 정렬 기능 추가하기

29 Nov 2023

javascript

웹사이트에 드래그 앤 드롭 기능을 사용하여 이미지 갤러리의 정렬 기능을 추가하는 방법에 대해 알아보겠습니다. 이 기능을 구현하면 사용자는 이미지를 마음대로 드래그하여 원하는 위치에 배치할 수 있습니다.

1. 드래그 앤 드롭 라이브러리 선택하기

드래그 앤 드롭 기능을 구현하기 위해 라이브러리를 선택해야 합니다. 여러 가지 옵션이 있지만, 예를 들어서 Draggable 라이브러리를 사용하겠습니다.

선택된 라이브러리를 다운로드하고 웹 페이지에 연결하세요.

<script src="path/to/draggable.min.js"></script>

2. HTML 구조 만들기

이미지 갤러리를 위한 HTML 구조를 만들어야 합니다. 일반적으로 이미지들이 포함된 div 요소를 사용합니다.

<div id="imageGallery">
  <img src="path/to/image1.jpg">
  <img src="path/to/image2.jpg">
  <img src="path/to/image3.jpg">
  <!-- 추가적인 이미지들 -->
</div>

3. 드래그 앤 드롭 기능 구현하기

웹 페이지의 DOMContentLoaded 이벤트에 대한 이벤트 리스너를 등록하여 드래그 앤 드롭 기능을 구현하세요.

document.addEventListener("DOMContentLoaded", function() {
  const container = document.getElementById("imageGallery");
  const draggable = new Draggable(container, {
    draggable: "img" // 드래그할 대상을 img 요소로 지정합니다.
  });
});

위의 코드에서 container 변수는 이미지 갤러리의 부모 요소를 가리키며, draggable 변수는 Draggable 객체를 생성합니다. draggable 객체에는 드래그할 대상을 지정할 수 있는 draggable 옵션이 있습니다.

4. 이미지 갤러리의 위치 저장하기

드래그 앤 드롭으로 이미지를 이동시킨 후에는 위치를 저장해야 합니다. 이를 위해 각 이미지의 위치를 저장할 수 있는 데이터 구조를 생성합니다.

const imageGallery = document.getElementById("imageGallery");
let imagePositions = [];

function saveImagePositions() {
  imagePositions = Array.from(imageGallery.children).map(function(image) {
    return {
      src: image.src,
      x: image.getBoundingClientRect().left - imageGallery.getBoundingClientRect().left,
      y: image.getBoundingClientRect().top - imageGallery.getBoundingClientRect().top
    };
  });
}

// 이미지 위치 저장하기
saveImagePositions();

위의 코드에서 첫 번째 줄은 이미지 갤러리의 부모 요소를 변수에 저장합니다. imagePositions 배열은 이미지 위치를 저장할 때 사용할 변수입니다. saveImagePositions() 함수는 이미지 위치를 가져와서 imagePositions 배열에 저장합니다.

5. 이미지 갤러리의 위치 복원하기

페이지 로드시 저장된 이미지 위치를 불러와서 이미지 갤러리에 반영합니다. 이를 위해 restoreImagePositions() 함수를 작성합니다.

function restoreImagePositions() {
  Array.from(imageGallery.children).forEach(function(image) {
    const position = imagePositions.find(function(item) {
      return item.src === image.src;
    });

    if (position) {
      image.style.left = position.x + "px";
      image.style.top = position.y + "px";
    }
  });
}

// 이미지 위치 복원하기
restoreImagePositions();

위의 코드에서 imagePositions 배열에서 이미지의 위치를 찾아 해당 위치로 복원합니다. 각 이미지의 left와 top 스타일 속성을 사용하여 위치를 설정합니다.

6. 이미지 위치 저장 및 복원의 트리거 설정하기

이미지 갤러리의 위치를 저장하고 복원하기 위해서는 트리거를 설정해야 합니다. 예를 들어, 이미지를 드래그 앤 드롭해서 위치를 변경할 때마다 위치를 저장하도록 설정할 수 있습니다.

draggable.on("drag:stop", function() {
  saveImagePositions();
});

위의 코드에서 draggable.on("drag:stop") 이벤트 리스너를 등록하여 드래그 앤 드롭 작업이 끝날 때마다 saveImagePositions() 함수를 호출하여 이미지 위치를 저장합니다.

이제, 드래그 앤 드롭 기능을 사용하여 웹사이트의 이미지 갤러리를 정렬할 수 있게 되었습니다. 사용자는 원하는 위치에 이미지를 드래그해서 배치할 수 있고, 이 위치는 페이지 리로드 이후에도 그대로 보존됩니다.

참고 자료

Draggable 라이브러리 GitHub 페이지