Interface SortableOptions

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? chosenClass? dataIdAttr? delay? delayOnTouchOnly? direction? disabled? dragClass? draggable? dragoverBubble? dropBubble? easing? emptyInsertThreshold? fallbackClass? fallbackOffset? fallbackOnBody? fallbackTolerance? filter? forceFallback? ghostClass? group? handle? ignore? invertSwap? invertedSwapThreshold? onAdd? onChange? onChoose? onClone? onEnd? onFilter? onMove? onRemove? onSort? onStart? onUnchoose? onUpdate? preventOnFilter? removeCloneOnHide? setData? sort? store? swapThreshold? touchStartThreshold?

Properties

Optionalanimation

animation?: number

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

OptionalchosenClass

chosenClass?: string

Class name for the chosen item

OptionaldataIdAttr

dataIdAttr?: string

Optionaldelay

delay?: number

time in milliseconds to define when the sorting should start

OptionaldelayOnTouchOnly

delayOnTouchOnly?: boolean

Only delay if user is using touch

Optionaldirection

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

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

Optionaldisabled

disabled?: boolean

Disables the sortable if set to true.

OptionaldragClass

dragClass?: string

Class name for the dragging item

Optionaldraggable

draggable?: string

Specifies which items inside the element should be draggable

OptionaldragoverBubble

dragoverBubble?: boolean

OptionaldropBubble

dropBubble?: boolean

Optionaleasing

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

Example

// 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'

OptionalemptyInsertThreshold

emptyInsertThreshold?: number

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

OptionalfallbackClass

fallbackClass?: string

Class name for the cloned DOM Element when using forceFallback

OptionalfallbackOffset

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

OptionalfallbackOnBody

fallbackOnBody?: boolean

Appends the cloned DOM Element into the Document's Body

OptionalfallbackTolerance

fallbackTolerance?: number

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

Optionalfilter

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

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

OptionalforceFallback

forceFallback?: boolean

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

OptionalghostClass

ghostClass?: string

Class name for the drop placeholder

Optionalgroup

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.

Optionalhandle

handle?: string

Drag handle selector within list items

Optionalignore

ignore?: string

OptionalinvertSwap

invertSwap?: boolean

Will always use inverted swap zone if set to true

OptionalinvertedSwapThreshold

invertedSwapThreshold?: number

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

OptionalonAdd

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

Element is dropped into the list from another list

OptionalonChange

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

Called when dragging element changes position

OptionalonChoose

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

Element is chosen

OptionalonClone

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

Created a clone of an element

OptionalonEnd

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

Element dragging ended

OptionalonFilter

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

Attempt to drag a filtered element

OptionalonMove

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

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

OptionalonRemove

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

Element is removed from the list into another list

OptionalonSort

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

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

OptionalonStart

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

Element dragging started

OptionalonUnchoose

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

Element is unchosen

OptionalonUpdate

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

Changed sorting within list

OptionalpreventOnFilter

preventOnFilter?: boolean

Call event.preventDefault() when triggered filter

OptionalremoveCloneOnHide

removeCloneOnHide?: boolean

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

OptionalsetData

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

Optionalsort

sort?: boolean

sorting inside list

Optionalstore

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

OptionalswapThreshold

swapThreshold?: number

Threshold of the swap zone. Defaults to 1

OptionaltouchStartThreshold

touchStartThreshold?: number

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

Settings

Member Visibility

On This Page

Properties