Sortable Complete example index

This catalog covers every Playground route provided by the module repository. Focused demos run directly in the docs; the full list represents examples you can run locally from the repository.

comins-sortable@0.1.6100

Playground examples

Find on this page

Simple sorting

vanilla

Playground

/examples/simple/vanilla

Source inventory

example/src/app/navigation.ts

Simple sorting

react

Playground

/examples/simple/react

Source inventory

example/src/app/navigation.ts

Simple sorting

vue

Playground

/examples/simple/vue

Source inventory

example/src/app/navigation.ts

Simple sorting

svelte

Playground

/examples/simple/svelte

Source inventory

example/src/app/navigation.ts

Two lists

vanilla

Playground

/examples/two-lists/vanilla

Source inventory

example/src/app/navigation.ts

Two lists

react

Playground

/examples/two-lists/react

Source inventory

example/src/app/navigation.ts

Two lists

vue

Playground

/examples/two-lists/vue

Source inventory

example/src/app/navigation.ts

Two lists

svelte

Playground

/examples/two-lists/svelte

Source inventory

example/src/app/navigation.ts

Clone

vanilla

Playground

/examples/clone/vanilla

Source inventory

example/src/app/navigation.ts

Clone

react

Playground

/examples/clone/react

Source inventory

example/src/app/navigation.ts

Clone

vue

Playground

/examples/clone/vue

Source inventory

example/src/app/navigation.ts

Clone

svelte

Playground

/examples/clone/svelte

Source inventory

example/src/app/navigation.ts

Custom clone

vanilla

Playground

/examples/custom-clone/vanilla

Source inventory

example/src/app/navigation.ts

Custom clone

react

Playground

/examples/custom-clone/react

Source inventory

example/src/app/navigation.ts

Custom clone

vue

Playground

/examples/custom-clone/vue

Source inventory

example/src/app/navigation.ts

Custom clone

svelte

Playground

/examples/custom-clone/svelte

Source inventory

example/src/app/navigation.ts

Copy with Alt/Option

vanilla

Playground

/examples/modifier-copy/vanilla

Source inventory

example/src/app/navigation.ts

Copy with Alt/Option

react

Playground

/examples/modifier-copy/react

Source inventory

example/src/app/navigation.ts

Copy with Alt/Option

vue

Playground

/examples/modifier-copy/vue

Source inventory

example/src/app/navigation.ts

Copy with Alt/Option

svelte

Playground

/examples/modifier-copy/svelte

Source inventory

example/src/app/navigation.ts

Drag start areas

vanilla

Playground

/examples/handle/vanilla

Source inventory

example/src/app/navigation.ts

Drag start areas

react

Playground

/examples/handle/react

Source inventory

example/src/app/navigation.ts

Drag start areas

vue

Playground

/examples/handle/vue

Source inventory

example/src/app/navigation.ts

Drag start areas

svelte

Playground

/examples/handle/svelte

Source inventory

example/src/app/navigation.ts

Sorting animation

vanilla

Playground

/examples/transition/vanilla

Source inventory

example/src/app/navigation.ts

Sorting animation

react

Playground

/examples/transition/react

Source inventory

example/src/app/navigation.ts

Sorting animation

vue

Playground

/examples/transition/vue

Source inventory

example/src/app/navigation.ts

Sorting animation

svelte

Playground

/examples/transition/svelte

Source inventory

example/src/app/navigation.ts

Multi-drag

vanilla

Playground

/examples/transitions/vanilla

Source inventory

example/src/app/navigation.ts

Multi-drag

react

Playground

/examples/transitions/react

Source inventory

example/src/app/navigation.ts

Multi-drag

vue

Playground

/examples/transitions/vue

Source inventory

example/src/app/navigation.ts

Multi-drag

svelte

Playground

/examples/transitions/svelte

Source inventory

example/src/app/navigation.ts

Sorting thresholds

vanilla

Playground

/examples/thresholds/vanilla

Source inventory

example/src/app/navigation.ts

Sorting thresholds

react

Playground

/examples/thresholds/react

Source inventory

example/src/app/navigation.ts

Sorting thresholds

vue

Playground

/examples/thresholds/vue

Source inventory

example/src/app/navigation.ts

Sorting thresholds

svelte

Playground

/examples/thresholds/svelte

Source inventory

example/src/app/navigation.ts

Swap

vanilla

Playground

/examples/swap/vanilla

Source inventory

example/src/app/navigation.ts

Swap

react

Playground

/examples/swap/react

Source inventory

example/src/app/navigation.ts

Swap

vue

Playground

/examples/swap/vue

Source inventory

example/src/app/navigation.ts

Swap

svelte

Playground

/examples/swap/svelte

Source inventory

example/src/app/navigation.ts

Grid

vanilla

Playground

/examples/grid/vanilla

Source inventory

example/src/app/navigation.ts

Grid

react

Playground

/examples/grid/react

Source inventory

example/src/app/navigation.ts

Grid

vue

Playground

/examples/grid/vue

Source inventory

example/src/app/navigation.ts

Grid

svelte

Playground

/examples/grid/svelte

Source inventory

example/src/app/navigation.ts

Swap grid

vanilla

Playground

/examples/swap-grid/vanilla

Source inventory

example/src/app/navigation.ts

Swap grid

react

Playground

/examples/swap-grid/react

Source inventory

example/src/app/navigation.ts

Swap grid

vue

Playground

/examples/swap-grid/vue

Source inventory

example/src/app/navigation.ts

Swap grid

svelte

Playground

/examples/swap-grid/svelte

Source inventory

example/src/app/navigation.ts

Consumer component host

vanilla

Playground

/examples/third-party/vanilla

Source inventory

example/src/app/navigation.ts

Consumer component host

react

Playground

/examples/third-party/react

Source inventory

example/src/app/navigation.ts

Consumer component host

vue

Playground

/examples/third-party/vue

Source inventory

example/src/app/navigation.ts

Consumer component host

svelte

Playground

/examples/third-party/svelte

Source inventory

example/src/app/navigation.ts

Footer slot

vanilla

Playground

/examples/footer-slot/vanilla

Source inventory

example/src/app/navigation.ts

Footer slot

react

Playground

/examples/footer-slot/react

Source inventory

example/src/app/navigation.ts

Footer slot

vue

Playground

/examples/footer-slot/vue

Source inventory

example/src/app/navigation.ts

Footer slot

svelte

Playground

/examples/footer-slot/svelte

Source inventory

example/src/app/navigation.ts

Header slot

vanilla

Playground

/examples/header-slot/vanilla

Source inventory

example/src/app/navigation.ts

Header slot

react

Playground

/examples/header-slot/react

Source inventory

example/src/app/navigation.ts

Header slot

vue

Playground

/examples/header-slot/vue

Source inventory

example/src/app/navigation.ts

Header slot

svelte

Playground

/examples/header-slot/svelte

Source inventory

example/src/app/navigation.ts

Two-list slots

vanilla

Playground

/examples/two-list-slots/vanilla

Source inventory

example/src/app/navigation.ts

Two-list slots

react

Playground

/examples/two-list-slots/react

Source inventory

example/src/app/navigation.ts

Two-list slots

vue

Playground

/examples/two-list-slots/vue

Source inventory

example/src/app/navigation.ts

Two-list slots

svelte

Playground

/examples/two-list-slots/svelte

Source inventory

example/src/app/navigation.ts

Nested lists

vanilla

Playground

/examples/nested/vanilla

Source inventory

example/src/app/navigation.ts

Nested lists

react

Playground

/examples/nested/react

Source inventory

example/src/app/navigation.ts

Nested lists

vue

Playground

/examples/nested/vue

Source inventory

example/src/app/navigation.ts

Nested lists

svelte

Playground

/examples/nested/svelte

Source inventory

example/src/app/navigation.ts

Per-list state control

vanilla

Playground

/examples/nested-controlled/vanilla

Source inventory

example/src/app/navigation.ts

Per-list state control

react

Playground

/examples/nested-controlled/react

Source inventory

example/src/app/navigation.ts

Per-list state control

vue

Playground

/examples/nested-controlled/vue

Source inventory

example/src/app/navigation.ts

Per-list state control

svelte

Playground

/examples/nested-controlled/svelte

Source inventory

example/src/app/navigation.ts

Nested consumer components

vanilla

Playground

/examples/functional-third-party/vanilla

Source inventory

example/src/app/navigation.ts

Nested consumer components

react

Playground

/examples/functional-third-party/react

Source inventory

example/src/app/navigation.ts

Nested consumer components

vue

Playground

/examples/functional-third-party/vue

Source inventory

example/src/app/navigation.ts

Nested consumer components

svelte

Playground

/examples/functional-third-party/svelte

Source inventory

example/src/app/navigation.ts

Empty destination

vanilla

Playground

/examples/empty/vanilla

Source inventory

example/src/app/navigation.ts

Empty destination

react

Playground

/examples/empty/react

Source inventory

example/src/app/navigation.ts

Empty destination

vue

Playground

/examples/empty/vue

Source inventory

example/src/app/navigation.ts

Empty destination

svelte

Playground

/examples/empty/svelte

Source inventory

example/src/app/navigation.ts

Accept and reject

vanilla

Playground

/examples/accept/vanilla

Source inventory

example/src/app/navigation.ts

Accept and reject

react

Playground

/examples/accept/react

Source inventory

example/src/app/navigation.ts

Accept and reject

vue

Playground

/examples/accept/vue

Source inventory

example/src/app/navigation.ts

Accept and reject

svelte

Playground

/examples/accept/svelte

Source inventory

example/src/app/navigation.ts

Auto scroll

vanilla

Playground

/examples/auto-scroll/vanilla

Source inventory

example/src/app/navigation.ts

Auto scroll

react

Playground

/examples/auto-scroll/react

Source inventory

example/src/app/navigation.ts

Auto scroll

vue

Playground

/examples/auto-scroll/vue

Source inventory

example/src/app/navigation.ts

Auto scroll

svelte

Playground

/examples/auto-scroll/svelte

Source inventory

example/src/app/navigation.ts

Subtree movement

vanilla

Playground

/examples/tree/vanilla

Source inventory

example/src/app/navigation.ts

Subtree movement

react

Playground

/examples/tree/react

Source inventory

example/src/app/navigation.ts

Subtree movement

vue

Playground

/examples/tree/vue

Source inventory

example/src/app/navigation.ts

Subtree movement

svelte

Playground

/examples/tree/svelte

Source inventory

example/src/app/navigation.ts

Drop feedback styles

vanilla

Playground

/examples/custom-placeholder/vanilla

Source inventory

example/src/app/navigation.ts

Drop feedback styles

react

Playground

/examples/custom-placeholder/react

Source inventory

example/src/app/navigation.ts

Drop feedback styles

vue

Playground

/examples/custom-placeholder/vue

Source inventory

example/src/app/navigation.ts

Drop feedback styles

svelte

Playground

/examples/custom-placeholder/svelte

Source inventory

example/src/app/navigation.ts

Skeleton placeholder

vanilla

Playground

/examples/skeleton-placeholder/vanilla

Source inventory

example/src/app/navigation.ts

Skeleton placeholder

react

Playground

/examples/skeleton-placeholder/react

Source inventory

example/src/app/navigation.ts

Skeleton placeholder

vue

Playground

/examples/skeleton-placeholder/vue

Source inventory

example/src/app/navigation.ts

Skeleton placeholder

svelte

Playground

/examples/skeleton-placeholder/svelte

Source inventory

example/src/app/navigation.ts