Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface ISortableProps<T>

Type parameters

  • T

Hierarchy

  • Omit<_sortableJS.Options, "onChange">
    • ISortableProps

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 className

className: string

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.

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

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

Optional filterClass

filterClass: string

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 items

items: T[]

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
    • get(sortable: Sortable): string[]
    • Parameters

      • sortable: Sortable

      Returns string[]

  • set: function
    • set(sortable: Sortable): void
    • Parameters

      • sortable: Sortable

      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 tag

tag: string | ComponentType<{}>

Optional touchStartThreshold

touchStartThreshold: number

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

Methods

Optional onAdd

  • onAdd(event: SortableEvent): void
  • Element is dropped into the list from another list

    Parameters

    • event: SortableEvent

    Returns void

Optional onChange

  • onChange(newItems: T[]): void

Optional onChoose

  • onChoose(event: SortableEvent): void
  • Element is chosen

    Parameters

    • event: SortableEvent

    Returns void

Optional onClone

  • onClone(event: SortableEvent): void
  • Created a clone of an element

    Parameters

    • event: SortableEvent

    Returns void

Optional onDeselect

  • onDeselect(event: SortableEvent): void
  • Called when an item is deselected

    Parameters

    • event: SortableEvent

    Returns void

Optional onEnd

  • onEnd(event: SortableEvent): void
  • Element dragging ended

    Parameters

    • event: SortableEvent

    Returns void

Optional onFilter

  • onFilter(event: SortableEvent): void
  • Attempt to drag a filtered element

    Parameters

    • event: SortableEvent

    Returns void

Optional onMove

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

    Parameters

    • evt: MoveEvent
    • originalEvent: Event

    Returns boolean | void | 1 | -1

Optional onRemove

  • onRemove(event: SortableEvent): void
  • Element is removed from the list into another list

    Parameters

    • event: SortableEvent

    Returns void

Optional onSelect

  • onSelect(event: SortableEvent): void
  • Called when an item is selected

    Parameters

    • event: SortableEvent

    Returns void

Optional onSort

  • onSort(event: SortableEvent): void
  • Called by any change to the list (add / update / remove)

    Parameters

    • event: SortableEvent

    Returns void

Optional onSpill

  • onSpill(evt: SortableEvent): void
  • Called when either revertOnSpill or RemoveOnSpill plugins are enabled.

    Parameters

    • evt: SortableEvent

    Returns void

Optional onStart

  • onStart(event: SortableEvent): void
  • Element dragging started

    Parameters

    • event: SortableEvent

    Returns void

Optional onUnchoose

  • onUnchoose(event: SortableEvent): void
  • Element is unchosen

    Parameters

    • event: SortableEvent

    Returns void

Optional onUpdate

  • onUpdate(event: SortableEvent): void
  • Changed sorting within list

    Parameters

    • event: SortableEvent

    Returns void

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