콘텐츠로 이동
Sortable시작하기

Sortable 전체 기능

현재 배포 버전에서 제공하는 기능을 인벤토리 기준으로 정리했습니다. 기능 이름이나 API로 검색하고 관련 가이드와 Playground 경로를 함께 확인할 수 있습니다.

comins-sortable@0.1.625

공개 기능

기본 정렬

simple
관련 API

itemsitemKeyonItemsChange

Playground

/examples/simple/vanilla/examples/simple/react/examples/simple/vue/examples/simple/svelte

근거

example/src/playground/scenarios.ts

두 목록

two-lists
관련 API

grouponChangeonItemsChange

Playground

/examples/two-lists/vanilla/examples/two-lists/react/examples/two-lists/vue/examples/two-lists/svelte

근거

example/src/playground/scenarios.ts

복제

clone
관련 API

group.pullcopyItemcopyElement

가이드

08-copy-clone

Playground

/examples/clone/vanilla/examples/clone/react/examples/clone/vue/examples/clone/svelte

근거

example/src/playground/scenarios.ts

사용자 정의 복제

custom-clone
관련 API

copyItemcopyElementitemKey

가이드

08-copy-clone

Playground

/examples/custom-clone/vanilla/examples/custom-clone/react/examples/custom-clone/vue/examples/custom-clone/svelte

근거

example/src/playground/scenarios.ts

보조키 복제

modifier-copy
관련 API

group.pullpointer.altKeycopyItem

가이드

08-copy-clone

Playground

/examples/modifier-copy/vanilla/examples/modifier-copy/react/examples/modifier-copy/vue/examples/modifier-copy/svelte

근거

example/src/playground/scenarios.ts

드래그 시작 영역

handle
관련 API

handleignore

Playground

/examples/handle/vanilla/examples/handle/react/examples/handle/vue/examples/handle/svelte

근거

example/src/playground/scenarios.ts

전환 효과

transition
관련 API

animationprefers-reduced-motion

Playground

/examples/transition/vanilla/examples/transition/react/examples/transition/vue/examples/transition/svelte

근거

example/src/playground/scenarios.ts

다중 선택 이동

transitions
관련 API

multiDragselectedClasschange.itemIds

Playground

/examples/transitions/vanilla/examples/transitions/react/examples/transitions/vue/examples/transitions/svelte

근거

example/src/playground/scenarios.ts

정렬 전환 기준

thresholds
관련 API

swapThresholdinvertSwap

Playground

/examples/thresholds/vanilla/examples/thresholds/react/examples/thresholds/vue/examples/thresholds/svelte

근거

example/src/playground/scenarios.ts

스왑

swap
관련 API

swapchange.swapItemId

Playground

/examples/swap/vanilla/examples/swap/react/examples/swap/vue/examples/swap/svelte

근거

example/src/playground/scenarios.ts

그리드

grid
관련 API

direction="grid"grid collision

Playground

/examples/grid/vanilla/examples/grid/react/examples/grid/vue/examples/grid/svelte

근거

example/src/playground/scenarios.ts

스왑 그리드

swap-grid
관련 API

direction="grid"swapchange.swapItemId

Playground

/examples/swap-grid/vanilla/examples/swap-grid/react/examples/swap-grid/vue/examples/swap-grid/svelte

근거

example/src/playground/scenarios.ts

사용자 컴포넌트 Host

third-party
관련 API

astagcomponentProps

Playground

/examples/third-party/vanilla/examples/third-party/react/examples/third-party/vue/examples/third-party/svelte

근거

example/src/playground/scenarios.ts

하단 슬롯

footer-slot
관련 API

footeritem selector

Playground

/examples/footer-slot/vanilla/examples/footer-slot/react/examples/footer-slot/vue/examples/footer-slot/svelte

근거

example/src/playground/scenarios.ts

상단 슬롯

header-slot
관련 API

headeritem selector

Playground

/examples/header-slot/vanilla/examples/header-slot/react/examples/header-slot/vue/examples/header-slot/svelte

근거

example/src/playground/scenarios.ts

두 목록 슬롯

two-list-slots
관련 API

headerfootergroup

Playground

/examples/two-list-slots/vanilla/examples/two-list-slots/react/examples/two-list-slots/vue/examples/two-list-slots/svelte

근거

example/src/playground/scenarios.ts

중첩 목록

nested
관련 API

parentnested-cycle

Playground

/examples/nested/vanilla/examples/nested/react/examples/nested/vue/examples/nested/svelte

근거

example/src/playground/scenarios.ts

목록별 상태 제어

nested-controlled
관련 API

parentonItemsChangeonChange

Playground

/examples/nested-controlled/vanilla/examples/nested-controlled/react/examples/nested-controlled/vue/examples/nested-controlled/svelte

근거

example/src/playground/scenarios.ts

사용자 컴포넌트 중첩

functional-third-party
관련 API

astagparent

Playground

/examples/functional-third-party/vanilla/examples/functional-third-party/react/examples/functional-third-party/vue/examples/functional-third-party/svelte

근거

example/src/playground/scenarios.ts

빈 대상 목록

empty
관련 API

emptyInsertThresholdgroup

Playground

/examples/empty/vanilla/examples/empty/react/examples/empty/vue/examples/empty/svelte

근거

example/src/playground/scenarios.ts

이동 허용과 거부

accept
관련 API

acceptdisabled

Playground

/examples/accept/vanilla/examples/accept/react/examples/accept/vue/examples/accept/svelte

근거

example/src/playground/scenarios.ts

자동 스크롤

auto-scroll
관련 API

autoScrolldirection

Playground

/examples/auto-scroll/vanilla/examples/auto-scroll/react/examples/auto-scroll/vue/examples/auto-scroll/svelte

근거

example/src/playground/scenarios.ts

하위 트리 이동

tree
관련 API

createSortableTreegetAreasupdateArea

Playground

/examples/tree/vanilla/examples/tree/react/examples/tree/vue/examples/tree/svelte

근거

example/src/playground/scenarios.ts

드롭 피드백 스타일

custom-placeholder
관련 API

placeholder.className--comins-sortable-placeholder-*--comins-sortable-rejection-outlineaccept

Playground

/examples/custom-placeholder/vanilla/examples/custom-placeholder/react/examples/custom-placeholder/vue/examples/custom-placeholder/svelte

근거

example/src/playground/scenarios.ts

Skeleton Placeholder

skeleton-placeholder
관련 API

placeholder.preset="skeleton"prefers-reduced-motion

Playground

/examples/skeleton-placeholder/vanilla/examples/skeleton-placeholder/react/examples/skeleton-placeholder/vue/examples/skeleton-placeholder/svelte

근거

example/src/playground/scenarios.ts

그리드 삽입은 잡은 카드의 중심을 기준으로 계산합니다. transformed·fixed 조상과 스크롤 아래에서도 드래그 피드백을 포인터에 맞추고, 서로 다른 scale의 복사·테이블 미리보기 크기를 보정합니다. 공개 export와 런타임 의존성은 유지합니다.