이번 포스트에서는 JavaScript를 사용하여 드래그 앤 드롭 효과를 적용한 목록 정렬 기능을 구현하는 방법에 대해 알아보겠습니다. 이러한 기능은 많은 웹 애플리케이션에서 사용되며 사용자가 목록을 재정렬하거나 항목을 이동시킬 수 있도록 도와줍니다.

필요한 라이브러리 설치

이 기능을 구현하기 위해 필요한 라이브러리는 없지만, Draggable 라이브러리를 사용하면 드래그 앤 드롭 기능을 간편하게 구현할 수 있습니다. 다음 명령어를 사용하여 Draggable 라이브러리를 설치합니다.

npm install draggable

HTML 구조 설정

드래그 앤 드롭 효과를 적용할 목록을 구성하기 위해 다음과 같이 HTML 구조를 설정합니다.

<ul id="sortable">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
  <li>항목 5</li>
</ul>

JavaScript 코드 작성

이제 JavaScript 코드를 작성하여 드래그 앤 드롭 효과를 적용하고 목록을 정렬할 수 있도록 만들어보겠습니다.

import Sortable from 'draggable'

const sortable = new Sortable.default(document.getElementById('sortable'), {
  draggable: 'li',
  handle: 'li' // 옵션: 드래그 앤 드롭 핸들 지정
})

sortable.on('sortable:stop', () => {
  const sortedItems = Array.from(sortable.getElements())
  console.log(sortedItems) // 정렬된 항목 출력
})

위 코드에서는 Draggable 라이브러리의 Sortable 클래스를 사용하여 sortable 요소를 draggable하게 만들었습니다. 이때, 드래그 앤 드롭을 할 항목을 li 요소로 지정하고, 필요에 따라 handle 옵션을 설정할 수 있습니다. sortable:stop 이벤트가 발생하면 정렬된 항목들을 출력하도록 설정하였습니다.

정리

드래그 앤 드롭 효과를 적용한 목록 정렬 기능을 구현하기 위해 Dragabble 라이브러리를 사용하는 방법에 대해 알아보았습니다. 이를 활용하면 사용자가 목록을 쉽게 정렬하고 항목을 이동시킬 수 있는 기능을 구현할 수 있습니다. 라이브러리를 사용하지 않고 순수 JavaScript로 구현할 수도 있지만, 드래그 앤 드롭에 필요한 이벤트 처리와 복잡한 로직 작성을 단순화할 수 있는 Dragabble 라이브러리를 활용하는 것을 권장합니다.