Interface Options

interface Options {
    animation?: number;
    bubbleScroll?: boolean;
    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;
    multiDrag?: boolean;
    multiDragKey?: null;
    onAdd?: ((event: SortableEvent) => void);
    onChange?: ((evt: SortableEvent) => void);
    onChoose?: ((event: SortableEvent) => void);
    onClone?: ((event: SortableEvent) => void);
    onDeselect?: ((event: SortableEvent) => void);
    onEnd?: ((event: SortableEvent) => void);
    onFilter?: ((event: SortableEvent) => void);
    onMove?: ((evt: MoveEvent, originalEvent: Event) =>
        | boolean
        | void
        | 1
        | -1);
    onRemove?: ((event: SortableEvent) => void);
    onSelect?: ((event: SortableEvent) => void);
    onSort?: ((event: SortableEvent) => void);
    onSpill?: ((evt: SortableEvent) => void);
    onStart?: ((event: SortableEvent) => void);
    onUnchoose?: ((event: SortableEvent) => void);
    onUpdate?: ((event: SortableEvent) => void);
    preventOnFilter?: boolean;
    removeCloneOnHide?: boolean;
    removeOnSpill?: boolean;
    revertOnSpill?: boolean;
    scroll?: boolean | HTMLElement;
    scrollFn?: ((this: Sortable, offsetX: number, offsetY: number, originalEvent: Event, touchEvt: TouchEvent, hoverTargetEl: HTMLElement) => void | "continue");
    scrollSensitivity?: number;
    scrollSpeed?: number;
    selectedClass?: string;
    setData?: ((dataTransfer: DataTransfer, draggedElement: HTMLElement) => void);
    sort?: boolean;
    store?: {
        get: ((sortable: sortablejs) => string[]);
        set: ((sortable: sortablejs) => void);
    };
    swap?: boolean;
    swapClass?: string;
    swapThreshold?: number;
    touchStartThreshold?: number;
}

Hierarchy (view full)

  • SortableOptions
  • AutoScrollOptions
  • MultiDragOptions
  • OnSpillOptions
  • SwapOptions
    • Options

Properties

animation? bubbleScroll? chosenClass? dataIdAttr? delay? delayOnTouchOnly? direction? disabled? dragClass? draggable? dragoverBubble? dropBubble? easing? emptyInsertThreshold? fallbackClass? fallbackOffset? fallbackOnBody? fallbackTolerance? filter? forceFallback? ghostClass? group? handle? ignore? invertSwap? invertedSwapThreshold? multiDrag? multiDragKey? onAdd? onChange? onChoose? onClone? onDeselect? onEnd? onFilter? onMove? onRemove? onSelect? onSort? onSpill? onStart? onUnchoose? onUpdate? preventOnFilter? removeCloneOnHide? removeOnSpill? revertOnSpill? scroll? scrollFn? scrollSensitivity? scrollSpeed? selectedClass? setData? sort? store? swap? swapClass? swapThreshold? touchStartThreshold?

Properties

Optionalanimation

animation?: number

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

OptionalbubbleScroll

bubbleScroll?: boolean

apply autoscroll to all parent elements, allowing for easier movement.

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)

OptionalmultiDrag

multiDrag?: boolean

Enable the plugin

OptionalmultiDragKey

multiDragKey?: null

Key that must be down for items to be selected

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

OptionalonDeselect

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

Called when an item is deselected

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

OptionalonSelect

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

Called when an item is selected

OptionalonSort

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

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

OptionalonSpill

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

Called when either revertOnSpill or RemoveOnSpill plugins are enabled.

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

OptionalremoveOnSpill

removeOnSpill?: boolean

This plugin, when enabled, will cause the dragged item to be removed from the DOM if it is spilled (ie. it is dropped outside of a valid Sortable drop target)

OptionalrevertOnSpill

revertOnSpill?: boolean

This plugin, when enabled, will cause the dragged item to be reverted to it's original position if it is spilled (ie. it is dropped outside of a valid Sortable drop target)

Optionalscroll

scroll?: boolean | HTMLElement

Enable the plugin. Can be HTMLElement.

OptionalscrollFn

scrollFn?: ((this: Sortable, offsetX: number, offsetY: number, originalEvent: Event, touchEvt: TouchEvent, hoverTargetEl: HTMLElement) => void | "continue")

if you have custom scrollbar scrollFn may be used for autoscrolling.

OptionalscrollSensitivity

scrollSensitivity?: number

px, how near the mouse must be to an edge to start scrolling.

OptionalscrollSpeed

scrollSpeed?: number

px, speed of the scrolling.`

OptionalselectedClass

selectedClass?: string

Class name for selected item

OptionalsetData

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

Optionalsort

sort?: boolean

sorting inside list

Optionalstore

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

Optionalswap

swap?: boolean

Enable swap mode

OptionalswapClass

swapClass?: string

Class name for swap item (if swap mode is enabled)

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