Interface Options

interface Options {
    animation?: number;
    bubbleScroll?: boolean;
    chosenClass?: string;
    dataIdAttr?: string;
    delay?: number;
    delayOnTouchOnly?: boolean;
    direction?: ((evt, target, dragEl) => 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, event, target, sortable) => boolean);
    forceFallback?: boolean;
    ghostClass?: string;
    group?: string | GroupOptions;
    handle?: string;
    ignore?: string;
    invertSwap?: boolean;
    invertedSwapThreshold?: number;
    multiDrag?: boolean;
    multiDragKey?: null;
    onAdd?: ((event) => void);
    onChange?: ((evt) => void);
    onChoose?: ((event) => void);
    onClone?: ((event) => void);
    onDeselect?: ((event) => void);
    onEnd?: ((event) => void);
    onFilter?: ((event) => void);
    onMove?: ((evt, originalEvent) => boolean | void | 1 | -1);
    onRemove?: ((event) => void);
    onSelect?: ((event) => void);
    onSort?: ((event) => void);
    onSpill?: ((evt) => void);
    onStart?: ((event) => void);
    onUnchoose?: ((event) => void);
    onUpdate?: ((event) => void);
    preventOnFilter?: boolean;
    removeCloneOnHide?: boolean;
    removeOnSpill?: boolean;
    revertOnSpill?: boolean;
    scroll?: boolean | HTMLElement;
    scrollFn?: ((this, offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) => void | "continue");
    scrollSensitivity?: number;
    scrollSpeed?: number;
    selectedClass?: string;
    setData?: ((dataTransfer, draggedElement) => void);
    sort?: boolean;
    store?: {
        get: ((sortable) => string[]);
        set: ((sortable) => void);
    };
    swap?: boolean;
    swapClass?: string;
    swapThreshold?: number;
    touchStartThreshold?: number;
}

Hierarchy

  • 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

Optional animation

animation?: number

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

Optional bubbleScroll

bubbleScroll?: boolean

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

Optional chosenClass

chosenClass?: string

Class name for the chosen item

Optional dataIdAttr

dataIdAttr?: string

Optional delay

delay?: number

time in milliseconds to define when the sorting should start

Optional delayOnTouchOnly

delayOnTouchOnly?: boolean

Only delay if user is using touch

Optional direction

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

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

Type declaration

Optional disabled

disabled?: boolean

Disables the sortable if set to true.

Optional dragClass

dragClass?: string

Class name for the dragging item

Optional draggable

draggable?: string

Specifies which items inside the element should be draggable

Optional dragoverBubble

dragoverBubble?: boolean

Optional dropBubble

dropBubble?: boolean

Optional easing

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'

Optional emptyInsertThreshold

emptyInsertThreshold?: number

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

Optional fallbackClass

fallbackClass?: string

Class name for the cloned DOM Element when using forceFallback

Optional fallbackOffset

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

Type declaration

  • x: number
  • y: number

Optional fallbackOnBody

fallbackOnBody?: boolean

Appends the cloned DOM Element into the Document's Body

Optional fallbackTolerance

fallbackTolerance?: number

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

Optional filter

filter?: string | ((this, event, target, sortable) => boolean)

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

Type declaration

    • (this, event, target, sortable): boolean

    • Parameters

      Returns boolean

Optional forceFallback

forceFallback?: boolean

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

Optional ghostClass

ghostClass?: string

Class name for the drop placeholder

Optional group

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.

Optional handle

handle?: string

Drag handle selector within list items

Optional ignore

ignore?: string

Optional invertSwap

invertSwap?: boolean

Will always use inverted swap zone if set to true

Optional invertedSwapThreshold

invertedSwapThreshold?: number

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

Optional multiDrag

multiDrag?: boolean

Enable the plugin

Optional multiDragKey

multiDragKey?: null

Key that must be down for items to be selected

Optional onAdd

onAdd?: ((event) => void)

Type declaration

    • (event): void

    • Element is dropped into the list from another list

      Parameters

      Returns void

Optional onChange

onChange?: ((evt) => void)

Type declaration

    • (evt): void

    • Called when dragging element changes position

      Parameters

      Returns void

Optional onChoose

onChoose?: ((event) => void)

Type declaration

    • (event): void

    • Element is chosen

      Parameters

      Returns void

Optional onClone

onClone?: ((event) => void)

Type declaration

    • (event): void

    • Created a clone of an element

      Parameters

      Returns void

Optional onDeselect

onDeselect?: ((event) => void)

Type declaration

    • (event): void

    • Called when an item is deselected

      Parameters

      Returns void

Optional onEnd

onEnd?: ((event) => void)

Type declaration

    • (event): void

    • Element dragging ended

      Parameters

      Returns void

Optional onFilter

onFilter?: ((event) => void)

Type declaration

    • (event): void

    • Attempt to drag a filtered element

      Parameters

      Returns void

Optional onMove

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

Type declaration

    • (evt, originalEvent): boolean | void | 1 | -1

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

      Parameters

      Returns boolean | void | 1 | -1

Optional onRemove

onRemove?: ((event) => void)

Type declaration

    • (event): void

    • Element is removed from the list into another list

      Parameters

      Returns void

Optional onSelect

onSelect?: ((event) => void)

Type declaration

    • (event): void

    • Called when an item is selected

      Parameters

      Returns void

Optional onSort

onSort?: ((event) => void)

Type declaration

    • (event): void

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

      Parameters

      Returns void

Optional onSpill

onSpill?: ((evt) => void)

Type declaration

    • (evt): void

    • Called when either revertOnSpill or RemoveOnSpill plugins are enabled.

      Parameters

      Returns void

Optional onStart

onStart?: ((event) => void)

Type declaration

    • (event): void

    • Element dragging started

      Parameters

      Returns void

Optional onUnchoose

onUnchoose?: ((event) => void)

Type declaration

    • (event): void

    • Element is unchosen

      Parameters

      Returns void

Optional onUpdate

onUpdate?: ((event) => void)

Type declaration

    • (event): void

    • Changed sorting within list

      Parameters

      Returns void

Optional preventOnFilter

preventOnFilter?: boolean

Call event.preventDefault() when triggered filter

Optional removeCloneOnHide

removeCloneOnHide?: boolean

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

Optional removeOnSpill

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)

Optional revertOnSpill

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)

Optional scroll

scroll?: boolean | HTMLElement

Enable the plugin. Can be HTMLElement.

Optional scrollFn

scrollFn?: ((this, offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) => void | "continue")

Type declaration

    • (this, offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl): void | "continue"

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

      Parameters

      • this: Sortable
      • offsetX: number
      • offsetY: number
      • originalEvent: Event
      • touchEvt: TouchEvent
      • hoverTargetEl: HTMLElement

      Returns void | "continue"

Optional scrollSensitivity

scrollSensitivity?: number

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

Optional scrollSpeed

scrollSpeed?: number

px, speed of the scrolling.`

Optional selectedClass

selectedClass?: string

Class name for selected item

Optional setData

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

Type declaration

    • (dataTransfer, draggedElement): void

    • Parameters

      • dataTransfer: DataTransfer
      • draggedElement: HTMLElement

      Returns void

Optional sort

sort?: boolean

sorting inside list

Optional store

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

Type declaration

  • get: ((sortable) => string[])
      • (sortable): string[]

      • Parameters

        Returns string[]

  • set: ((sortable) => void)
      • (sortable): void

      • Parameters

        Returns void

Optional swap

swap?: boolean

Enable swap mode

Optional swapClass

swapClass?: string

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

Optional swapThreshold

swapThreshold?: number

Threshold of the swap zone. Defaults to 1

Optional touchStartThreshold

touchStartThreshold?: number

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

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc