Interface SortableOptions

interface SortableOptions {
    ghostClass?: string;
    chosenClass?: string;
    dragClass?: string;
    animation?: number;
    easing?: string;
    group?: string | SortableGroup;
    sort?: boolean;
    disabled?: boolean;
    multiDrag?: boolean;
    selectedClass?: string;
    deselectOnClickOutside?: boolean;
    onEnd?: (event: SortableEvent) => void;
    onStart?: (event: SortableEvent) => void;
    onAdd?: (event: SortableEvent) => void;
    onUpdate?: (event: SortableEvent) => void;
    onRemove?: (event: SortableEvent) => void;
    enableAccessibility?: boolean;
    focusClass?: string;
    onSelect?: (event: Partial<SortableEvent>) => void;
    handle?: string;
    filter?: string;
    onFilter?: (event: Event) => void;
    ignore?: string;
    draggable?: string;
    delay?: number;
    delayOnTouchOnly?: number;
    touchStartThreshold?: number;
    swapThreshold?: number;
    invertSwap?: boolean;
    invertedSwapThreshold?: number;
    direction?: "vertical" | "horizontal";
    forceFallback?: boolean;
    fallbackClass?: string;
    fallbackOnBody?: boolean;
    fallbackTolerance?: number;
    fallbackOffsetX?: number;
    fallbackOffsetY?: number;
    dragoverBubble?: boolean;
    dropBubble?: boolean;
    removeCloneOnHide?: boolean;
    emptyInsertThreshold?: number;
    preventOnFilter?: boolean;
    dataIdAttr?: string;
    onChoose?: (event: SortableEvent) => void;
    onUnchoose?: (event: SortableEvent) => void;
    onSort?: (event: SortableEvent) => void;
    onMove?: (
        event: MoveEvent,
        originalEvent: Event,
    ) => boolean | void | 1 | -1;
    onClone?: (event: SortableEvent) => void;
    onChange?: (event: SortableEvent) => void;
    onSpill?: (event: SortableEvent) => void;
    revertOnSpill?: boolean;
    removeOnSpill?: boolean;
    setData?: (dataTransfer: DataTransfer, dragEl: HTMLElement) => void;
    store?: {
        set?: (sortable: SortableInstanceForStore) => void;
        get?: (sortable: SortableInstanceForStore) => string[];
    };
}

Properties

`Optional`ghostClass

ghostClass?: string

CSS class applied to the ghost element during drag

Default Value

'sortable-ghost'

Example

{ ghostClass: 'my-ghost-style' }

`Optional`chosenClass

chosenClass?: string

CSS class applied to the chosen element when drag starts

Default Value

'sortable-chosen'

`Optional`dragClass

dragClass?: string

CSS class applied to the dragging element

Default Value

'sortable-drag'

`Optional`animation

animation?: number

Animation duration in milliseconds. Set to 0 to disable animations.

Default Value

`Optional`easing

easing?: string

CSS easing function for animations

Default Value

'cubic-bezier(0.4, 0.0, 0.2, 1)'

Example

{ easing: 'ease-in-out' }
{ easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)' }

`Optional`group

group?: string | SortableGroup

Group name or configuration for sharing items between lists

Default Value

'default'

Example: Simple group name

{ group: 'my-group' }

Example: Advanced group configuration

{
  group: {
    name: 'shared',
    pull: 'clone',
    put: ['other-group']
  }
}

`Optional`sort

sort?: boolean

Whether sorting is enabled within the list

Default Value

true

`Optional`disabled

disabled?: boolean

Whether the sortable is disabled

Default Value

false

`Optional`multiDrag

multiDrag?: boolean

Enable multi-drag functionality

Default Value

false

`Optional`selectedClass

selectedClass?: string

CSS class for selected items in multi-drag mode

Default Value

'sortable-selected'

`Optional`deselectOnClickOutside

deselectOnClickOutside?: boolean

Clear selection when clicking outside the sortable container

Default Value

true

`Optional`onEnd

onEnd?: (event: SortableEvent) => void

Callback fired when drag operation ends

Type Declaration

- (event: SortableEvent): void
- Parameters
  - event: SortableEvent
    The sortable event containing drag details
  Returns void

Example

{
  onEnd: (evt) => {
    console.log(`Moved from ${evt.oldIndex} to ${evt.newIndex}`);
    console.log('Item:', evt.item);
  }
}

`Optional`onStart

onStart?: (event: SortableEvent) => void

Callback fired when drag operation starts

Type Declaration

- (event: SortableEvent): void
- Parameters
  - event: SortableEvent
    The sortable event
  Returns void

`Optional`onAdd

onAdd?: (event: SortableEvent) => void

Callback fired when an item is added from another list

Type Declaration

- (event: SortableEvent): void
- Parameters
  - event: SortableEvent
    The sortable event
  Returns void

`Optional`onUpdate

onUpdate?: (event: SortableEvent) => void

Callback fired when sorting changes within the same list

Type Declaration

- (event: SortableEvent): void
- Parameters
  - event: SortableEvent
    The sortable event
  Returns void

`Optional`onRemove

onRemove?: (event: SortableEvent) => void

Callback fired when an item is removed to another list

Type Declaration

- (event: SortableEvent): void
- Parameters
  - event: SortableEvent
    The sortable event
  Returns void

`Optional`enableAccessibility

enableAccessibility?: boolean

Enable accessibility features (keyboard navigation, ARIA attributes)

Default Value

true

`Optional`focusClass

focusClass?: string

CSS class for focused items during keyboard navigation

Default Value

'sortable-focused'

`Optional`onSelect

onSelect?: (event: Partial<SortableEvent>) => void

Callback fired when items are selected/deselected

Type Declaration

- (event: Partial<SortableEvent>): void
- Parameters
  - event: Partial<SortableEvent>
    The sortable event
  Returns void

`Optional`handle

handle?: string

CSS selector for drag handle When specified, drag can only be initiated from matching elements

Default Value

undefined

Example

// Only allow dragging from elements with class 'drag-handle'
{ handle: '.drag-handle' }

// Multiple handles using a more complex selector
{ handle: '.drag-handle, .drag-icon' }

`Optional`filter

filter?: string

CSS selector for elements that should not trigger drag

Default Value

undefined

Example

// Prevent dragging when clicking on input elements
{ filter: 'input, textarea, button' }

`Optional`onFilter

onFilter?: (event: Event) => void

Callback fired when a filtered element is clicked

Type Declaration

- (event: Event): void
- Parameters
  - event: Event
    The original mouse/touch event
  Returns void

`Optional`ignore

ignore?: string

CSS selector for descendants of draggable items that should NOT initiate a drag. Used to allow click-through on interactive elements like links and images so users can follow an <a> or drag an <img> natively without a sortable drag starting underneath them. Matches the legacy Sortable.js v1 behaviour and default value.

Pass an empty string ('') to disable the default and allow drags to start from any descendant.

Default Value

'a, img'

Example

// Default — links and images do not start a drag
new Sortable(el, {})

// Extend the default
new Sortable(el, { ignore: 'a, img, input, button' })

// Disable the default entirely
new Sortable(el, { ignore: '' })

`Optional`draggable

draggable?: string

CSS selector for draggable items

Default Value

'.sortable-item'

Example

// Only allow specific items to be draggable
{ draggable: '.draggable-item' }

`Optional`delay

delay?: number

Delay in milliseconds before drag starts

Default Value

Example

// 300ms delay before drag starts
{ delay: 300 }

`Optional`delayOnTouchOnly

delayOnTouchOnly?: number

Delay on touch devices (fallback to delay if not specified)

Default Value

delay || 0

Example

// Different delays for mouse and touch
{ delay: 0, delayOnTouchOnly: 300 }

`Optional`touchStartThreshold

touchStartThreshold?: number

Pixels of movement allowed before cancelling delayed drag event

Default Value

Example

// Allow 10px of movement before cancelling delayed drag
{ touchStartThreshold: 10 }

`Optional`swapThreshold

swapThreshold?: number

Threshold of the swap zone (0-1)

Default Value

Example

// Swap when dragged element overlaps 50% with target
{ swapThreshold: 0.5 }

`Optional`invertSwap

invertSwap?: boolean

Inverts the swap threshold behavior

Default Value

false

Example

// Invert swap behavior for drop zones
{ invertSwap: true }

`Optional`invertedSwapThreshold

invertedSwapThreshold?: number

Threshold when swap is inverted (0-1)

Default Value

swapThreshold

Example

// Different threshold when inverted
{ invertedSwapThreshold: 0.3 }

`Optional`direction

direction?: "vertical" | "horizontal"

Direction of sortable ('vertical' or 'horizontal')

Default Value

'vertical'

Example

// Horizontal sorting for image gallery
{ direction: 'horizontal' }

`Optional`forceFallback

forceFallback?: boolean

Enable fallback for browsers without native drag support

Default Value

true

Example

// Disable fallback to use native HTML5 drag only
{ forceFallback: false }

`Optional`fallbackClass

fallbackClass?: string

CSS class for fallback ghost element

Default Value

'sortable-fallback'

`Optional`fallbackOnBody

fallbackOnBody?: boolean

Use fallback on touch devices

Default Value

false

`Optional`fallbackTolerance

fallbackTolerance?: number

Fallback tolerance in pixels

Default Value

`Optional`fallbackOffsetX

fallbackOffsetX?: number

X-axis offset for fallback ghost

Default Value

`Optional`fallbackOffsetY

fallbackOffsetY?: number

Y-axis offset for fallback ghost

Default Value

`Optional`dragoverBubble

dragoverBubble?: boolean

Allow dragover event to bubble. When false (default), the library calls e.stopPropagation() after handling so that ancestor sortables don't double-process the event. Set true to support nested sortables.

Default Value

false

`Optional`dropBubble

dropBubble?: boolean

Allow drop event to bubble. When false (default), the library calls e.stopPropagation() after handling. Set true to let ancestor sortables observe drop completions (e.g. for nested-sortable layouts).

Default Value

false

`Optional`removeCloneOnHide

removeCloneOnHide?: boolean

Remove clone element when it's not showing.

Currently a no-op: Resortable does not yet implement clone hide/show cycles — clones are always created on drag start and removed on drag end. Tracked in the v1.x parity work under #44.

Default Value

true

`Optional`emptyInsertThreshold

emptyInsertThreshold?: number

Distance mouse must move from empty sortable to insert drag element into it

Default Value

`Optional`preventOnFilter

preventOnFilter?: boolean

Call preventDefault when filter is triggered

Default Value

true

`Optional`dataIdAttr

dataIdAttr?: string

HTML attribute used to track element IDs

Default Value

'data-id'

`Optional`onChoose

onChoose?: (event: SortableEvent) => void

Callback fired when an element is chosen

Type Declaration

- (event: SortableEvent): void
- Parameters
  - event: SortableEvent
    The sortable event
  Returns void

`Optional`onUnchoose

onUnchoose?: (event: SortableEvent) => void

Callback fired when an element is unchosen

Type Declaration

- (event: SortableEvent): void
- Parameters
  - event: SortableEvent
    The sortable event
  Returns void

`Optional`onSort

onSort?: (event: SortableEvent) => void

Callback fired when sorting changes

Type Declaration

- (event: SortableEvent): void
- Parameters
  - event: SortableEvent
    The sortable event
  Returns void

`Optional`onMove

onMove?: (event: MoveEvent, originalEvent: Event) => boolean | void | 1 | -1

Callback fired during move operations

Type Declaration

- (event: MoveEvent, originalEvent: Event): boolean | void | 1 | -1
- Parameters
  - event: MoveEvent
    The move event with related element
  - originalEvent: Event
    The original drag event
  Returns boolean | void | 1 | -1
  - false to cancel the move (no placeholder shift; no sort / update / change emission for that tick)
  - -1 to force inserting BEFORE the related item
  - 1 to force inserting AFTER the related item
  - true / void to proceed with the natural heuristic

`Optional`onClone

onClone?: (event: SortableEvent) => void

Callback fired when an element is cloned

Type Declaration

- (event: SortableEvent): void
- Parameters
  - event: SortableEvent
    The sortable event with clone
  Returns void

`Optional`onChange

onChange?: (event: SortableEvent) => void

Callback fired when the sort order has changed

Type Declaration

- (event: SortableEvent): void
- Parameters
  - event: SortableEvent
    The sortable event
  Returns void

`Optional`onSpill

onSpill?: (event: SortableEvent) => void

Callback fired when an item is dropped outside all sortable containers

Type Declaration

- (event: SortableEvent): void
- Parameters
  - event: SortableEvent
    The sortable event
  Returns void

`Optional`revertOnSpill

revertOnSpill?: boolean

Revert item to its original position when dropped outside sortable areas Requires the OnSpill plugin to be installed.

Default Value

false

`Optional`removeOnSpill

removeOnSpill?: boolean

Remove item from the DOM when dropped outside sortable areas Requires the OnSpill plugin to be installed.

Default Value

false

`Optional`setData

setData?: (dataTransfer: DataTransfer, dragEl: HTMLElement) => void

Custom function to set data on the DataTransfer object during drag start

Type Declaration

- (dataTransfer: DataTransfer, dragEl: HTMLElement): void
- Parameters
  - dataTransfer: DataTransfer
    The DataTransfer object from the drag event
  - dragEl: HTMLElement
    The element being dragged
  Returns void

Example

{
  setData: (dataTransfer, dragEl) => {
    dataTransfer.setData('text/html', dragEl.outerHTML);
  }
}

`Optional`store

store?: {
set?: (sortable: SortableInstanceForStore) => void;
get?: (sortable: SortableInstanceForStore) => string[];
}

Key to use when saving/restoring sort order via localStorage Used by the save() method.

Type Declaration

Optionalset?: (sortable: SortableInstanceForStore) => void
Called when sort order changes — persist the array
Optionalget?: (sortable: SortableInstanceForStore) => string[]
Called on initialization — return the stored order

Default Value

undefined

Interface SortableOptions

Index

Properties

Properties

OptionalghostClass

Default Value

Example

OptionalchosenClass

Default Value

OptionaldragClass

Default Value

Optionalanimation

Default Value

Optionaleasing

Default Value

Example

Optionalgroup

Default Value

Example: Simple group name

Example: Advanced group configuration

Optionalsort

Default Value

Optionaldisabled

Default Value

OptionalmultiDrag

Default Value

OptionalselectedClass

Default Value

OptionaldeselectOnClickOutside

Default Value

OptionalonEnd

Type Declaration

Parameters

Returns void

Example

OptionalonStart

Type Declaration

Parameters

Returns void

OptionalonAdd

Type Declaration

Parameters

Returns void

OptionalonUpdate

Type Declaration

Parameters

Returns void

OptionalonRemove

Type Declaration

Parameters

Returns void

OptionalenableAccessibility

Default Value

OptionalfocusClass

Default Value

OptionalonSelect

Type Declaration

Parameters

Returns void

Optionalhandle

Default Value

Example

Optionalfilter

Default Value

Example

OptionalonFilter

Type Declaration

Parameters

Returns void

Optionalignore

Default Value

Example

Optionaldraggable

Default Value

Example

Optionaldelay

Default Value

Example

OptionaldelayOnTouchOnly

Default Value

`Optional`ghostClass

`Optional`chosenClass

`Optional`dragClass

`Optional`animation

`Optional`easing

`Optional`group

`Optional`sort

`Optional`disabled

`Optional`multiDrag

`Optional`selectedClass

`Optional`deselectOnClickOutside

`Optional`onEnd

`Optional`onStart

`Optional`onAdd

`Optional`onUpdate

`Optional`onRemove

`Optional`enableAccessibility

`Optional`focusClass

`Optional`onSelect

`Optional`handle

`Optional`filter

`Optional`onFilter

`Optional`ignore

`Optional`draggable

`Optional`delay

`Optional`delayOnTouchOnly

`Optional`touchStartThreshold

`Optional`swapThreshold

`Optional`invertSwap

`Optional`invertedSwapThreshold

`Optional`direction

`Optional`forceFallback

`Optional`fallbackClass

`Optional`fallbackOnBody

`Optional`fallbackTolerance

`Optional`fallbackOffsetX

`Optional`fallbackOffsetY

`Optional`dragoverBubble

`Optional`dropBubble

`Optional`removeCloneOnHide

`Optional`emptyInsertThreshold

`Optional`preventOnFilter

`Optional`dataIdAttr

`Optional`onChoose

`Optional`onUnchoose

`Optional`onSort

`Optional`onMove

`Optional`onClone

`Optional`onChange

`Optional`onSpill

`Optional`revertOnSpill