S SV5UI Plus

Quick Example

SortableList Usage

ตัวอย่าง import และการใช้งานแบบสั้นสำหรับหน้า `sortable-list`

Code

                <script lang="ts">
 import { SortableList } from 'sv5ui-plus';

 let tasks = $state([
   { id: 'a', title: 'Review PR' },
   { id: 'b', title: 'Write docs' }
 ]);
</script>

<SortableList bind:items={tasks} getKey={(task) => task.id}>
 {#snippet children({ item })}
   <span>{item.title}</span>
 {/snippet}
</SortableList>

SortableList

Opinionated sortable list built on useSortable. Uses bind:items to keep array state in sync. See the Drag & Drop playground for more examples. For kanban or cross-column moves, use useDragDrop.

When to use what

Use SortableList for standard vertical/horizontal task lists with a grip handle. Use useSortable directly when you need full control over markup. See the drag & drop overview for FileUpload and Editor.

Basic

Tasks

Inbox zero #1
Prepare release notes #2
Record demo video #3
Update changelog #4

Horizontal

Stages

Draft
Review
Publish

Whole row drag

Set handle={false} to drag the entire row.

Click anywhere to drag
No handle needed
Works great for simple lists

Draggable Containers (Kanban)

Wrap multiple SortableList components in a SortableGroup to drag items between them.

In Progress

Learn Svelte 5
Build a Kanban board
Review code
Setup project

Done

API Reference

Props

items

T[]

Bindable array — updated automatically on reorder.

getKey

(item: T) => string | number

Stable key per item (used in #each).

onReorder

(items: T[]) => void

Optional callback after bind:items updates.

handle

boolean

Show grip handle. Default true. Set false to drag the whole row.

axis

'vertical' | 'horizontal' | 'grid'

List layout axis. Default vertical. Use grid with CSS grid classes.

disabled

boolean

Disable sorting.

class

ClassNameValue

Classes on the list container.

itemClass

ClassNameValue

Classes on each sortable row.

overlay

Snippet<[{ item: T }]>

Optional snippet to render a custom drag overlay (floating placeholder).

children snippet

item

T

The row item.

index

number

Zero-based position in the array.

dragging

boolean

True while this row is being dragged.