Class Sortable

Configures the given element as a Sortable widget.

The Sortable widget allows the user to reorder elements by dragging and dropping. It works on touch devices as well. However, it does not yet support automatic scrolling when dragging beyond edge of screen on mobile devices. For this, you may want to use SortableJS instead.

The widget should have more than one draggable item.

IMPORTANT: You should not instantiate more than one Sortable widget on a given element. Use Sortable.get to get an existing instance if any. If there is already a widget instance, it will be destroyed!

You can use the following dynamic attributes or CSS properties in your stylesheet:

The following dynamic attributes are set on each item element:

  • data-lisn-is-draggable: "true" or "false" (false if the item is disabled)

To use with auto-widgets (HTML API) (see settings.autoWidgets), the following CSS classes or data attributes are recognized:

  • lisn-sortable class or data-lisn-sortable attribute set on the container element that constitutes the sortable container.
  • lisn-sortable-item class or data-lisn-sortable-item attribute set on elements that should act as the items.

When using auto-widgets, the elements that will be used as items are discovered in the following way:

  1. The top-level element that constitutes the widget is searched for any elements that contain the lisn-sortable-item class or data-lisn-sortable-item attribute. They do not have to be immediate children of the root element.
  2. If there are no such elements, all of the immediate children of the widget element (other than script and style elements) are taken as the items.

Example

<div class="lisn-sortable">
  <div class="box">Item 1</div>
  <div class="box">Item 2</div>
  <div class="box">Item 3</div>
  <div class="box">Item 4</div>
</div>

Hierarchy (View Summary)

Methods

get register

Constructors

constructor

Properties

destroy disable disableItem enable enableItem getElement getItems isDestroyed isDisabled isItemDisabled onDestroy onDisable onEnable onMove toggleEnable toggleItem

Methods

Staticget

Staticregister

Constructors

constructor

Properties

Readonlydestroy

destroy: () => Promise<void>

Undoes all modifications to the element and returns it to its original state.

You will need to recreate it if you want to enable its functionality again.

Readonlydisable

disable: () => Promise<void>

Disables the functionality of the widget. What this means is specific to each widget.

ReadonlydisableItem

disableItem: (itemNum: number, currentOrder?: boolean) => Promise<void>

Disables the given item number. Note that item numbers start at 1.

Type declaration

    • (itemNum: number, currentOrder?: boolean): Promise<void>

    • Parameters

      • itemNum: number
      • OptionalcurrentOrder: boolean

        If false (default), the item numbers refer to the original order. If true, they refer to the current document order.

      Returns Promise<void>

Readonlyenable

enable: () => Promise<void>

Re-enables the functionality of the widget. What this means is specific to each widget.

ReadonlyenableItem

enableItem: (itemNum: number, currentOrder?: boolean) => Promise<void>

Re-enables the given item number. Note that item numbers start at 1.

Type declaration

    • (itemNum: number, currentOrder?: boolean): Promise<void>

    • Parameters

      • itemNum: number
      • OptionalcurrentOrder: boolean

        If false (default), the item numbers refer to the original order. If true, they refer to the current document order.

      Returns Promise<void>

ReadonlygetElement

getElement: () => Element

Returns the element passed to the widget constructor.

ReadonlygetItems

getItems: (currentOrder?: boolean) => Element[]

Returns the item elements.

Type declaration

    • (currentOrder?: boolean): Element[]

    • Parameters

      • OptionalcurrentOrder: boolean

        If false (default), returns the items in the original order. If true, they are returned in the current document order.

      Returns Element[]

ReadonlyisDestroyed

isDestroyed: () => boolean

Returns true if the widget is destroyed.

ReadonlyisDisabled

isDisabled: () => boolean

Returns true if the widget is currently disabled.

ReadonlyisItemDisabled

isItemDisabled: (itemNum: number, currentOrder?: boolean) => boolean

Returns true if the given item number is disabled. Note that item numbers start at 1.

Type declaration

    • (itemNum: number, currentOrder?: boolean): boolean

    • Parameters

      • itemNum: number
      • OptionalcurrentOrder: boolean

        If false (default), the item numbers refer to the original order. If true, they refer to the current document order.

      Returns boolean

ReadonlyonDestroy

onDestroy: (handler: WidgetHandler) => void

The given handler will be called when the widget is destroyed.

ReadonlyonDisable

onDisable: (handler: WidgetHandler) => void

The given handler will be called when the widget is disabled.

ReadonlyonEnable

onEnable: (handler: WidgetHandler) => void

The given handler will be called when the widget is enabled.

ReadonlyonMove

onMove: (handler: WidgetHandler) => void

The given handler will be called whenever the user moves an item to another position. It will be called after the item is moved so getItems called with currentOrder = true will return the updated order.

If the handler returns a promise, it will be awaited upon.

ReadonlytoggleEnable

toggleEnable: () => Promise<void>

Re-enables the widget if disabled, otherwise disables it.

ReadonlytoggleItem

toggleItem: (itemNum: number, currentOrder?: boolean) => Promise<void>

Re-enables the given item number if it is disabled, otherwise disables it. Note that item numbers start at 1.

Type declaration

    • (itemNum: number, currentOrder?: boolean): Promise<void>

    • Parameters

      • itemNum: number
      • OptionalcurrentOrder: boolean

        If false (default), the item numbers refer to the original order. If true, they refer to the current document order.

      Returns Promise<void>

Settings

Member Visibility

On This Page

Methods
Constructors
Properties