Options
All
  • Public
  • Public/Protected
  • All
Menu

Hierarchy

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

Index

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: SortableEvent, target: HTMLElement, dragEl: HTMLElement) => Direction) | Direction

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

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.

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 | ((event: Event | TouchEvent, target: HTMLElement, sortable: sortablejs) => boolean)

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

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 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 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 sort

sort?: boolean

sorting inside list

Optional store

store?: { get: any; set: any }

Type declaration

  • get:function
    • Parameters

      Returns string[]

  • set:function
    • 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

Methods

Optional onAdd

  • Element is dropped into the list from another list

    Parameters

    Returns void

Optional onChange

  • Called when dragging element changes position

    Parameters

    Returns void

Optional onChoose

Optional onClone

Optional onDeselect

  • Called when an item is deselected

    Parameters

    Returns void

Optional onEnd

Optional onFilter

Optional onMove

  • onMove(evt: MoveEvent, originalEvent: Event): boolean | void | 1 | -1
  • Event when you move an item in the list or between lists

    Parameters

    Returns boolean | void | 1 | -1

Optional onRemove

  • Element is removed from the list into another list

    Parameters

    Returns void

Optional onSelect

  • Called when an item is selected

    Parameters

    Returns void

Optional onSort

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

    Parameters

    Returns void

Optional onSpill

  • Called when either revertOnSpill or RemoveOnSpill plugins are enabled.

    Parameters

    Returns void

Optional onStart

Optional onUnchoose

Optional onUpdate

Optional scrollFn

  • scrollFn(offsetX: number, offsetY: number, originalEvent: Event, touchEvt: TouchEvent, hoverTargetEl: HTMLElement): void | "continue"
  • if you have custom scrollbar scrollFn may be used for autoscrolling.

    Parameters

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

    Returns void | "continue"

Optional setData

  • setData(dataTransfer: DataTransfer, draggedElement: HTMLElement): void
  • Parameters

    • dataTransfer: DataTransfer
    • draggedElement: HTMLElement

    Returns void

Generated using TypeDoc