UI Elements

Sortable

A container that allows users to reorder items through drag-and-drop interactions.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte
<ul class="whole">
  {#each items.values as value, i}
    <li class="main">{item(value)}</li>
  {/each}
</ul>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface SortableProps {
  items: SortableItems; // wrapper around string array to handle drag and drop
  item: Snippet<[string, string, PointerEventHandler]>; // Snippet<[value, variant, onpointerdown]>
  ghost?: Snippet<[string]>; // custom ghost element while dragging (translucent item); Snippet<[value]>
  name?: string;        // name of this group (random string)
  mode?: "std" | "clone" | "swap";  // sort mode ("std")
  accept?: string[];    // list of accepted group names (undefined); undefined=any,[]=none
  sort?: boolean;       // enable sorting within the same group (true)
  multiple?: boolean;   // enable multiple selection and dragging (false)
  draggable?: boolean;  // enable default pointerdown handler (true)
  appendable?: boolean; // enable appending when entering group area (false)
  confirm?: boolean     // enable confirmation delay before moving items (false)
  styling?: SVSClass;
  variant?: string;     // bindable (VARIANT.NEUTRAL)
}

Additional Props

  • ghost - Custom ghost element displayed instead of the default translucent item during drag
  • name - Name used for group-to-group item transfer
  • mode - Sorting behavior for this group
    • std - Items move normally
    • clone - Clone item when moved to another group
    • swap - Swap item with the target item
  • accept - Names of groups from which this group accepts items
  • sort - Whether items can be sorted within this group
  • multiple - When true, selected items move together as a group
  • draggable - Whether drag functionality is enabled for this group
  • appendable - Whether dragging items can be appended when entering the ul element
  • confirm - Whether to add a confirmation delay before moving items

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-sortable

Exports

Types

TypeScript
type SortableReqdProps = "items" | "item";
type SortableBindProps = "variant";

Others

TypeScript
// Methods have the same functionality as standard array methods
class SortableItems {
  constructor(values: string[])
  at(index: number): string | undefined
  replace(index: number, value: string): boolean
  push(value: string)
  pop(): string | undefined
  unshift(value: string)
  shift(): string | undefined
  insert(index: number, value: string) // alternative to splice
  extract(index: number): string | undefined // alternative to splice
  isEmpty(): boolean
  clear(): void
  get length(): number
  get values(): string[]
  set values(values: string[])
}

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

  • Item 1
  • Item 2
  • Item 3
  • Item 4

With Interactive Variant

Preset for Demo
Enter variant as you like
  • 🍎 apple
  • 🍊 orange
  • 🍑 peach
  • 🍌 banana
  • 🍇 grape
  • 🍈 melon