@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

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 {}

                      property bottom

                      bottom: number;

                        property height

                        height: number;

                          property left

                          left: number;

                            property right

                            right: number;

                              property top

                              top: number;

                                property width

                                width: number;

                                  property x

                                  x: number;

                                    property y

                                    y: number;

                                      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 to newIndicies[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 to newIndicies[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 triggered filter

                                                                          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 onejsDocs.io badgeto 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>