@types/sortablejs
- Version 1.15.8
- Published
- 22.9 kB
- No dependencies
- MIT license
Install
npm i @types/sortablejs
yarn add @types/sortablejs
pnpm add @types/sortablejs
Overview
TypeScript definitions for sortablejs
Index
Classes
Interfaces
SortableOptions
- animation
- chosenClass
- dataIdAttr
- delay
- delayOnTouchOnly
- direction
- disabled
- dragClass
- draggable
- dragoverBubble
- dropBubble
- easing
- emptyInsertThreshold
- fallbackClass
- fallbackOffset
- fallbackOnBody
- fallbackTolerance
- filter
- forceFallback
- ghostClass
- group
- handle
- ignore
- invertedSwapThreshold
- invertSwap
- onAdd
- onChange
- onChoose
- onClone
- onEnd
- onFilter
- onMove
- onRemove
- onSort
- onStart
- onUnchoose
- onUpdate
- preventOnFilter
- removeCloneOnHide
- setData
- sort
- store
- swapThreshold
- touchStartThreshold
Type Aliases
Classes
class AutoScroll
class AutoScroll extends AutoScrollPlugin {}
class MultiDrag
class MultiDrag extends MultiDragPlugin {}
class OnSpill
class OnSpill extends OnSpillPlugin {}
class Plugin
class Plugin extends SortablePlugin {}
A class that all plugins inherit from for the sake of type inference.
class Sortable
class Sortable {}
constructor
constructor(element: HTMLElement, options: Sortable.Options);
Sortable's main constructor.
Parameter element
Any variety of HTMLElement.
Parameter options
Sortable options object.
property active
static active: Sortable;
property clone
static clone: HTMLElement;
The clone element.
property dragged
static dragged: HTMLElement;
The element being dragged.
property el
el: HTMLElement;
property ghost
static ghost: HTMLElement;
The ghost element.
property options
options: Sortable.Options;
property utils
static utils: Sortable.Utils;
property version
static readonly version: string;
Get the Sortable version
method closest
closest: (element: HTMLElement, selector?: string) => HTMLElement | null;
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
Parameter element
an HTMLElement or selector string.
Parameter selector
default:
options.draggable
method create
static create: (element: HTMLElement, options?: Sortable.Options) => Sortable;
Creation of new instances.
Parameter element
Any variety of HTMLElement.
Parameter options
Sortable options object.
method destroy
destroy: () => void;
Removes the sortable functionality completely.
method get
static get: (element: HTMLElement) => Sortable | undefined;
Get the Sortable instance on an element.
method mount
static mount: (...sortablePlugins: SortablePlugin[]) => void;
Mounts a plugin to Sortable
Parameter sortablePlugin
a sortable plugin.
Example 1
Sortable.mount(new MultiDrag(), new AutoScroll())
method option
option: { <K extends keyof Sortable.Options>( name: K, value: Sortable.Options[K] ): void; <K extends keyof Sortable.Options>(name: K): Sortable.Options[K];};
Options getter/setter
Parameter name
a Sortable.Options property.
Parameter value
a value.
method save
save: () => void;
Saving and restoring of the sort.
method sort
sort: (order: readonly string[], useAnimation?: boolean) => void;
Sorts the elements according to the array.
Parameter order
an array of strings to sort.
Parameter useAnimation
default: false.
method toArray
toArray: () => string[];
Serializes the sortable's item data-id's (dataIdAttr option) into an array of string.
class Swap
class Swap extends SwapPlugin {}
Interfaces
interface DOMRect
interface DOMRect {}
interface GroupOptions
interface GroupOptions {}
property checkPull
checkPull?: | (( sortable: Sortable, activeSortable: Sortable, dragEl: HTMLElement, event: SortableEvent ) => boolean | string | string[]) | undefined;
a canonical version of pull, created by Sortable
property checkPut
checkPut?: | (( sortable: Sortable, activeSortable: Sortable, dragEl: HTMLElement, event: SortableEvent ) => boolean | string | 'clone' | string[]) | undefined;
a canonical version of put, created by Sortable
property name
name: string;
group name
property pull
pull?: | PullResult | (( to: Sortable, from: Sortable, dragEl: HTMLElement, event: SortableEvent ) => PullResult) | undefined;
ability to move from the list. clone — copy the item, rather than move.
property put
put?: | PutResult | (( to: Sortable, from: Sortable, dragEl: HTMLElement, event: SortableEvent ) => PutResult) | undefined;
whether elements can be added from other lists, or an array of group names from which elements can be taken.
property revertClone
revertClone?: boolean | undefined;
revert cloned element to initial position after moving to a another list.
interface MoveEvent
interface MoveEvent extends Event {}
property dragged
dragged: HTMLElement;
property draggedRect
draggedRect: DOMRect;
property from
from: HTMLElement;
property related
related: HTMLElement;
element on which have guided
property relatedRect
relatedRect: DOMRect;
property to
to: HTMLElement;
property willInsertAfter
willInsertAfter?: boolean | undefined;
interface Options
interface Options extends SortableOptions, AutoScrollOptions, MultiDragOptions, OnSpillOptions, SwapOptions {}
interface SortableEvent
interface SortableEvent extends Event {}
property clone
clone: HTMLElement;
property from
from: HTMLElement;
previous list
property item
item: HTMLElement;
dragged element
property items
items: HTMLElement[];
dragged elements
property newDraggableIndex
newDraggableIndex: number | undefined;
New index within parent, only counting draggable elements
property newIndex
newIndex: number | undefined;
new index within parent
property newIndicies
newIndicies: Array<{ multiDragElement: HTMLElement; index: number }>;
When MultiDrag is used to sort, this holds a HTMLElement and newIndex for each item.
oldIndicies[number]
is directly related tonewIndicies[number]
If MultiDrag is not used to sort, this array will be empty.
property oldDraggableIndex
oldDraggableIndex: number | undefined;
Old index within parent, only counting draggable elements
property oldIndex
oldIndex: number | undefined;
old index within parent
property oldIndicies
oldIndicies: Array<{ multiDragElement: HTMLElement; index: number }>;
When MultiDrag is used to sort, this holds a HTMLElement and oldIndex for each item selected.
oldIndicies[number]
is directly related tonewIndicies[number]
If MultiDrag is not used to sort, this array will be empty.
property pullMode
pullMode: 'clone' | boolean | undefined;
Pull mode if dragging into another sortable
property swapItem
swapItem: HTMLElement | null;
When Swap is used to sort, this will contain the dragging item that was dropped on.
property target
target: HTMLElement;
property to
to: HTMLElement;
list, in which moved element.
interface SortableOptions
interface SortableOptions {}
property animation
animation?: number | undefined;
ms, animation speed moving items when sorting,
0
— without animation
property chosenClass
chosenClass?: string | undefined;
Class name for the chosen item
property dataIdAttr
dataIdAttr?: string | undefined;
property delay
delay?: number | undefined;
time in milliseconds to define when the sorting should start
property delayOnTouchOnly
delayOnTouchOnly?: boolean | undefined;
Only delay if user is using touch
property direction
direction?: | (( evt: SortableEvent, target: HTMLElement, dragEl: HTMLElement ) => Direction) | Direction | undefined;
Direction of Sortable (will be detected automatically if not given)
property disabled
disabled?: boolean | undefined;
Disables the sortable if set to true.
property dragClass
dragClass?: string | undefined;
Class name for the dragging item
property draggable
draggable?: string | undefined;
Specifies which items inside the element should be draggable
property dragoverBubble
dragoverBubble?: boolean | undefined;
property dropBubble
dropBubble?: boolean | undefined;
property easing
easing?: string | undefined;
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 1
// 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'
property emptyInsertThreshold
emptyInsertThreshold?: number | undefined;
distance mouse must be from empty sortable to insert drag element into it
property fallbackClass
fallbackClass?: string | undefined;
Class name for the cloned DOM Element when using forceFallback
property fallbackOffset
fallbackOffset?: { x: number; y: number } | undefined;
property fallbackOnBody
fallbackOnBody?: boolean | undefined;
Appends the cloned DOM Element into the Document's Body
property fallbackTolerance
fallbackTolerance?: number | undefined;
Specify in pixels how far the mouse should move before it's considered as a drag.
property filter
filter?: | string | (( this: Sortable, event: Event | TouchEvent, target: HTMLElement, sortable: Sortable ) => boolean) | undefined;
Selectors that do not lead to dragging (String or Function)
property forceFallback
forceFallback?: boolean | undefined;
ignore the HTML5 DnD behaviour and force the fallback to kick in
property ghostClass
ghostClass?: string | undefined;
Class name for the drop placeholder
property group
group?: string | GroupOptions | undefined;
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.
property handle
handle?: string | undefined;
Drag handle selector within list items
property ignore
ignore?: string | undefined;
property invertedSwapThreshold
invertedSwapThreshold?: number | undefined;
Threshold of the inverted swap zone (will be set to
swapThreshold
value by default)
property invertSwap
invertSwap?: boolean | undefined;
Will always use inverted swap zone if set to true
property onAdd
onAdd?: ((event: SortableEvent) => void) | undefined;
Element is dropped into the list from another list
property onChange
onChange?: ((evt: SortableEvent) => void) | undefined;
Called when dragging element changes position
property onChoose
onChoose?: ((event: SortableEvent) => void) | undefined;
Element is chosen
property onClone
onClone?: ((event: SortableEvent) => void) | undefined;
Created a clone of an element
property onEnd
onEnd?: ((event: SortableEvent) => void) | undefined;
Element dragging ended
property onFilter
onFilter?: ((event: SortableEvent) => void) | undefined;
Attempt to drag a filtered element
property onMove
onMove?: | ((evt: MoveEvent, originalEvent: Event) => boolean | -1 | 1 | void) | undefined;
Event when you move an item in the list or between lists
property onRemove
onRemove?: ((event: SortableEvent) => void) | undefined;
Element is removed from the list into another list
property onSort
onSort?: ((event: SortableEvent) => void) | undefined;
Called by any change to the list (add / update / remove)
property onStart
onStart?: ((event: SortableEvent) => void) | undefined;
Element dragging started
property onUnchoose
onUnchoose?: ((event: SortableEvent) => void) | undefined;
Element is unchosen
property onUpdate
onUpdate?: ((event: SortableEvent) => void) | undefined;
Changed sorting within list
property preventOnFilter
preventOnFilter?: boolean | undefined;
Call
event.preventDefault()
when triggeredfilter
property removeCloneOnHide
removeCloneOnHide?: boolean | undefined;
Remove the clone element when it is not showing, rather than just hiding it
property setData
setData?: | ((dataTransfer: DataTransfer, draggedElement: HTMLElement) => void) | undefined;
property sort
sort?: boolean | undefined;
sorting inside list
property store
store?: | { get: (sortable: Sortable) => string[]; set: (sortable: Sortable) => void; } | undefined;
property swapThreshold
swapThreshold?: number | undefined;
Threshold of the swap zone. Defaults to
1
property touchStartThreshold
touchStartThreshold?: number | undefined;
How many *pixels* the point should move before cancelling a delayed drag event
interface Utils
interface Utils {}
method closest
closest: ( element: HTMLElement, selector: string, context?: HTMLElement) => HTMLElement | null;
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
Parameter element
an HTMLElement.
Parameter selector
an element seletor.
Parameter context
a specific element's context.
method css
css: { (element: HTMLElement): CSSStyleDeclaration; <K extends keyof CSSStyleDeclaration>( element: HTMLElement, prop: K ): CSSStyleDeclaration[K]; <K extends keyof CSSStyleDeclaration>( element: HTMLElement, prop: K, value: CSSStyleDeclaration[K] ): void;};
Get the values of all the CSS properties.
Parameter element
an HTMLElement.
Get the value of style properties.
Parameter element
an HTMLElement.
Parameter prop
a property key.
Set one CSS property.
Parameter element
an HTMLElement.
Parameter prop
a property key.
Parameter value
a property value.
method deselect
deselect: (element: HTMLElement) => void;
Deselects the provided multi-drag item
Parameter element
The element to be deselected
method find
find: ( context: HTMLElement, tagName: string, iterator?: (value: HTMLElement, index: number) => void) => NodeListOf<HTMLElement>;
Get elements by tag name.
Parameter context
an HTMLElement.
Parameter tagName
A tag name.
Parameter iterator
An iterator.
method is
is: (element: HTMLElement, selector: string) => boolean;
Check the current matched set of elements against a selector.
Parameter element
an HTMLElement.
Parameter selector
an element selector.
method off
off: ( element: HTMLElement, event: string, fn: EventListenerOrEventListenerObject) => void;
Remove an event handler function
Parameter element
an HTMLElement.
Parameter event
an Event context.
Parameter fn
a callback.
method on
on: ( element: HTMLElement, event: string, fn: EventListenerOrEventListenerObject) => void;
Attach an event handler function
Parameter element
an HTMLElement.
Parameter event
an Event context.
Parameter fn
method select
select: (element: HTMLElement) => void;
Selects the provided multi-drag item
Parameter element
The element to be selected
method toggleClass
toggleClass: (element: HTMLElement, name: string, state: boolean) => void;
Add or remove one classes from each element
Parameter element
an HTMLElement.
Parameter name
a class name.
Parameter state
a class's state.
Type Aliases
type Direction
type Direction = 'vertical' | 'horizontal';
type PullResult
type PullResult = readonly string[] | boolean | 'clone';
type PutResult
type PutResult = readonly string[] | boolean;
Package Files (1)
Dependencies (0)
No dependencies.
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (0)
No peer dependencies.
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/sortablejs
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/sortablejs)
- HTML<a href="https://www.jsdocs.io/package/@types/sortablejs"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 4415 ms. - Missing or incorrect documentation? Open an issue for this package.