빠른 시작
comins-sortable@0.1.6
아래 Playground 경로는 해당 모듈 저장소에서 개발 서버를 실행한 뒤 사용하는 로컬 경로입니다. 현재 문서 사이트의 실행 링크는 아닙니다.
이 가이드는 Comins Sortable의 공개 API 사용법을 설명합니다. 아래 저장소 Playground에서 정렬 기능을 확인할 수 있습니다.
패키지와 선택한 어댑터의 peer dependency를 설치합니다.
# Vanilla JavaScriptnpm install comins-sortable@0.1.6
# Reactnpm install comins-sortable@0.1.6 react@19.3.0 react-dom@19.3.0
# Vuenpm install comins-sortable@0.1.6 vue@3.5.42
# Sveltenpm install comins-sortable@0.1.6 svelte@5.57.0어댑터별 공개 export에서 API를 가져옵니다. 내장 Placeholder preset을 사용할 때는 스타일 파일도 가져옵니다.
import { SortableArea, SortableRoot } from 'comins-sortable/react';import 'comins-sortable/styles.css';프레임워크 어댑터는 제어형으로 동작합니다. 애플리케이션이 각 items 배열을
소유하고 onItemsChange 또는 Vue의 update:modelValue 결과를 실제 렌더에
반영해야 합니다. 다음 프레임에 렌더 결과가 없거나 DOM 구조가 오래된 상태이면
state-not-committed로 drag를 rollback합니다.
0.1.4에서는 드래그 시작 시점과 비교하여 출발·도착 목록의 항목 순서,
ID 또는 항목 DOM이 달라져도 드롭을 state-not-committed로 거부합니다.
해당 드롭의 변경 이벤트는 발생하지 않습니다. 취소 시 외부에서 변경한 출발
목록을 보존하고 삭제된 항목을 다시 삽입하지 않습니다. 이동 실패 시 기존
다중 선택과 범위 선택의 기준 항목도 유지합니다.
모든 항목은 같은 group 전체에서 유일하고 안정적인 ID를 가져야 합니다. 배열
index를 itemKey로 사용하지 않습니다.
Git 저장소의 Playground를 실행합니다.
git clone https://github.com/kim1124/comins-sortable.gitcd comins-sortablegit checkout ff13440ff099a2c5f7f4c6cc2d72f4977db1c942npm ci --ignore-scriptsnpm run dev/examples/simple/react를 열고 코드 보기에서 선택한
어댑터의 실제 예제 코드를 확인합니다.
Playground는 기본적으로 왼쪽 핸들로 정렬하고 본문에서 텍스트를 선택·복사합니다.
드래그 시작 영역 예제는 제목·카드 전체 활성화도 비교합니다. 이는 데모의 구성
방식이며 소비자는 handle 옵션으로 적용합니다. 모드별 차이와 현재 Safari 제목
드래그 제한은 핸들과 수락 정책을 참조합니다.