interface SortableOptions {
    animation?: number;
    chosenClass?: string;
    dataIdAttr?: string;
    delay?: number;
    delayOnTouchOnly?: boolean;
    direction?: ((evt: SortableEvent, target: HTMLElement, dragEl: HTMLElement) => Direction) | Direction;
    disabled?: boolean;
    dragClass?: string;
    draggable?: string;
    dragoverBubble?: boolean;
    dropBubble?: boolean;
    easing?: string;
    emptyInsertThreshold?: number;
    fallbackClass?: string;
    fallbackOffset?: {
        x: number;
        y: number;
    };
    fallbackOnBody?: boolean;
    fallbackTolerance?: number;
    filter?: string | ((this: sortablejs, event: Event | TouchEvent, target: HTMLElement, sortable: sortablejs) => boolean);
    forceFallback?: boolean;
    ghostClass?: string;
    group?: string | GroupOptions;
    handle?: string;
    ignore?: string;
    invertSwap?: boolean;
    invertedSwapThreshold?: number;
    onAdd?: ((event: SortableEvent) => void);
    onChange?: ((evt: SortableEvent) => void);
    onChoose?: ((event: SortableEvent) => void);
    onClone?: ((event: SortableEvent) => void);
    onEnd?: ((event: SortableEvent) => void);
    onFilter?: ((event: SortableEvent) => void);
    onMove?: ((evt: MoveEvent, originalEvent: Event) =>
        | boolean
        | void
        | 1
        | -1);
    onRemove?: ((event: SortableEvent) => void);
    onSort?: ((event: SortableEvent) => void);
    onStart?: ((event: SortableEvent) => void);
    onUnchoose?: ((event: SortableEvent) => void);
    onUpdate?: ((event: SortableEvent) => void);
    preventOnFilter?: boolean;
    removeCloneOnHide?: boolean;
    setData?: ((dataTransfer: DataTransfer, draggedElement: HTMLElement) => void);
    sort?: boolean;
    store?: {
        get: ((sortable: sortablejs) => string[]);
        set: ((sortable: sortablejs) => void);
    };
    swapThreshold?: number;
    touchStartThreshold?: number;
}

Hierarchy (view full)

Properties

animation?: number

ms, animation speed moving items when sorting, 0 — without animation

chosenClass?: string

Class name for the chosen item

dataIdAttr?: string
delay?: number

time in milliseconds to define when the sorting should start

delayOnTouchOnly?: boolean

Only delay if user is using touch

direction?: ((evt: SortableEvent, target: HTMLElement, dragEl: HTMLElement) => Direction) | Direction

Direction of Sortable (will be detected automatically if not given)

disabled?: boolean

Disables the sortable if set to true.

dragClass?: string

Class name for the dragging item

draggable?: string

Specifies which items inside the element should be draggable

dragoverBubble?: boolean
dropBubble?: boolean
easing?: string

Easing for animation. Defaults to null.

See https://easings.net/ for examples.

For other possible values, see https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

// CSS functions
| 'steps(int, start | end)'
| 'cubic-bezier(n, n, n, n)'

// CSS values
| 'linear'
| 'ease'
| 'ease-in'
| 'ease-out'
| 'ease-in-out'
| 'step-start'
| 'step-end'
| 'initial'
| 'inherit'
emptyInsertThreshold?: number

distance mouse must be from empty sortable to insert drag element into it

fallbackClass?: string

Class name for the cloned DOM Element when using forceFallback

fallbackOffset?: {
    x: number;
    y: number;
}
fallbackOnBody?: boolean

Appends the cloned DOM Element into the Document's Body

fallbackTolerance?: number

Specify in pixels how far the mouse should move before it's considered as a drag.

filter?: string | ((this: sortablejs, event: Event | TouchEvent, target: HTMLElement, sortable: sortablejs) => boolean)

Selectors that do not lead to dragging (String or Function)

forceFallback?: boolean

ignore the HTML5 DnD behaviour and force the fallback to kick in

ghostClass?: string

Class name for the drop placeholder

group?: string | GroupOptions

To drag elements from one list into another, both lists must have the same group value. You can also define whether lists can give away, give and keep a copy (clone), and receive elements.

handle?: string

Drag handle selector within list items

ignore?: string
invertSwap?: boolean

Will always use inverted swap zone if set to true

invertedSwapThreshold?: number

Threshold of the inverted swap zone (will be set to swapThreshold value by default)

onAdd?: ((event: SortableEvent) => void)

Element is dropped into the list from another list

onChange?: ((evt: SortableEvent) => void)

Called when dragging element changes position

onChoose?: ((event: SortableEvent) => void)

Element is chosen

onClone?: ((event: SortableEvent) => void)

Created a clone of an element

onEnd?: ((event: SortableEvent) => void)

Element dragging ended

onFilter?: ((event: SortableEvent) => void)

Attempt to drag a filtered element

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

Event when you move an item in the list or between lists

onRemove?: ((event: SortableEvent) => void)

Element is removed from the list into another list

onSort?: ((event: SortableEvent) => void)

Called by any change to the list (add / update / remove)

onStart?: ((event: SortableEvent) => void)

Element dragging started

onUnchoose?: ((event: SortableEvent) => void)

Element is unchosen

onUpdate?: ((event: SortableEvent) => void)

Changed sorting within list

preventOnFilter?: boolean

Call event.preventDefault() when triggered filter

removeCloneOnHide?: boolean

Remove the clone element when it is not showing, rather than just hiding it

setData?: ((dataTransfer: DataTransfer, draggedElement: HTMLElement) => void)
sort?: boolean

sorting inside list

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

Threshold of the swap zone. Defaults to 1

touchStartThreshold?: number

How many pixels the point should move before cancelling a delayed drag event