Javascript Sortable 완벽 가이드 리스트 정렬을 위한 최적의 솔루션

Javascript Sortable란 무엇인가?

Javascript Sortable은 웹 브라우저에서 HTML 요소들을 드래그 앤 드롭 방식으로 정렬할 수 있게 해주는 경량화된 자바스크립트 라이브러리다. 사용자 경험을 극대화하며, 인터페이스 상의 리스트나 카드 구성 요소들을 쉽게 이동시킬 수 있도록 만들어준다. 별도의 외부 의존성 없이도 순수 자바스크립트만으로 동작하며, 프론트엔드 개발자들이 대시보드, Kanban 보드, 갤러리 등 다양한 UI 구성에서 활용할 수 있다.

SortableJS의 주요 특징 및 장점

1. 경량화 및 높은 성능

Sortable은 파일 크기가 작고 로딩 속도가 빠르며, 성능 최적화가 잘 되어 있어 대용량 리스트에서도 빠르게 반응한다. 이 점은 모바일 환경에서도 끊김 없는 드래그 경험을 제공한다.

2. 외부 의존성 없는 순수 Javascript 구현

SortableJS는 jQuery나 다른 라이브러리에 의존하지 않는다. Vanilla JS 기반으로 구성되어 있어, 모던 웹 애플리케이션에 쉽게 통합할 수 있다.

3. 다양한 브라우저 지원

모던 브라우저를 대부분 지원하며, 기본적인 모바일 터치 기능까지도 호환되어 반응형 웹에서도 완벽하게 작동한다.

4. 다양한 이벤트 핸들링

드래그 시작부터 종료까지 다양한 커스텀 이벤트를 제공하며, 이를 통해 개발자는 사용자 액션에 따른 맞춤형 기능을 구현할 수 있다.

반응형

SortableJS의 기본 사용법

기본 구조

<ul id="sortable-list">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

자바스크립트 코드

const sortable = new Sortable(document.getElementById('sortable-list'), {
  animation: 150,
});

• animation: 드래그 시 애니메이션 지속 시간 (ms)
• ghostClass: 드래그 중 요소에 적용할 클래스
• handle: 특정 드래그 핸들 지정

CDN으로 불러오기

반응형

고급 기능 및 커스터마이징 예제

1. 그룹(Group)을 이용한 다중 리스트 정렬

new Sortable(document.getElementById('list1'), {
  group: 'shared',
  animation: 150
});

new Sortable(document.getElementById('list2'), {
  group: 'shared',
  animation: 150
});

• 두 리스트 간의 항목 이동이 가능해진다.
• Kanban 보드 구현에 유용하다.

2. 드래그 핸들 지정

new Sortable(document.getElementById('sortable-list'), {
  handle: '.drag-handle',
});

• 리스트 아이템 내부 특정 아이콘이나 영역만 드래그할 수 있게 제한한다.

3. 필터링으로 드래그 불가능하게 만들기

new Sortable(document.getElementById('sortable-list'), {
  filter: '.no-drag',
  onFilter: function (evt) {
    alert('이 항목은 드래그할 수 없습니다.');
  }
});

반응형

실전 예제: Kanban 보드 구현하기

HTML 예시

<div id="todo" class="kanban-list">
  <h3>할 일</h3>
  <div class="task">작업 A</div>
  <div class="task">작업 B</div>
</div>

<div id="doing" class="kanban-list">
  <h3>진행 중</h3>
  <div class="task">작업 C</div>
</div>

자바스크립트 설정

['todo', 'doing'].forEach(id => {
  new Sortable(document.getElementById(id), {
    group: 'kanban',
    animation: 150,
    draggable: '.task'
  });
});

• 각 열을 그룹화하여 드래그로 이동 가능하게 설정
• draggable로 드래그 가능한 요소 제한

반응형

드래그 이벤트 제어하기

SortableJS는 다양한 이벤트를 제공하여 세밀한 사용자 정의가 가능하다.

주요 이벤트 목록

• onStart: 드래그 시작 시
• onEnd: 드래그 종료 시
• onAdd: 다른 리스트에서 항목이 추가될 때
• onRemove: 리스트에서 항목이 제거될 때
• onUpdate: 항목 위치가 변경될 때

이벤트 예시

new Sortable(document.getElementById('sortable-list'), {
  onEnd: function (evt) {
    console.log('이동된 항목:', evt.item);
    console.log('새 위치:', evt.newIndex);
  }
});

반응형

SortableJS와 다른 라이브러리 비교

기능 SortableJS jQuery UI Sortable Dragula

파일 크기	작음	큼	중간
의존성	없음	jQuery 필요	없음
모바일 지원	우수	제한적	좋음
애니메이션 지원	지원	일부 지원	기본
커스터마이징	매우 유연	제한적	중간

• 특히 모바일 성능과 유연한 커스터마이징 측면에서 SortableJS는 타 라이브러리 대비 큰 장점을 가진다.

반응형

사용자 인터랙션 최적화 팁

1. 드래그 반응속도 향상

• delay와 touchStartThreshold를 적절히 조정해 모바일 터치 환경에서 실수 방지

new Sortable(el, {
  delay: 100,
  touchStartThreshold: 5,
});

2. 비활성화와 활성화 기능

• 특정 조건에서 드래그 기능을 끄거나 켤 수 있다.

sortable.option("disabled", true); // 드래그 비활성화
sortable.option("disabled", false); // 드래그 활성화

3. 드래그 방향 제한

• 수직 또는 수평 정렬에 따라 움직임 제한 가능

new Sortable(el, {
  direction: 'horizontal',
});

반응형

실제 사용 사례

• Trello 스타일 보드: 드래그 가능한 컬럼과 카드 구현
• 이미지 갤러리: 순서 변경 가능한 썸네일 목록
• 폼 요소 정렬기: 입력 필드 순서 자유롭게 조정
• 온라인 설문 툴: 우선순위 조정 가능 항목 정렬

이처럼 SortableJS는 단순한 리스트 외에도 다양한 UX 구현에 활용할 수 있다.

반응형

결론

Javascript Sortable은 뛰어난 유연성과 성능, 그리고 다양한 활용 가능성 덕분에 프론트엔드 개발에서 필수 도구로 자리매김하고 있다. 복잡한 로직 없이도 다양한 인터페이스에 통합할 수 있으며, 사용자 경험을 향상시키는 데 최적화되어 있다.