Class Sortable`Beta`

Main Sortable class for creating drag-and-drop sortable lists

Remarks

This is the main entry point for the Resortable library. It provides a modern, TypeScript-first approach to creating sortable drag-and-drop interfaces.

Unlike the original Sortable.js, this version:

Uses modern ES modules
Provides full TypeScript support
Implements a plugin-based architecture
Uses modern DOM APIs

Example: Creating a basic sortable list

const sortable = new Sortable(document.getElementById('items'), {
  animation: 150,
  onEnd: (evt) => {
    console.log(`Item moved from ${evt.oldIndex} to ${evt.newIndex}`);
  }
});

Public

Index

Constructors

constructor

new Sortable(element: HTMLElement, options?: Partial<SortableOptions>): Sortable
Beta
Creates a new Sortable instance
Parameters
- element: HTMLElement
  The DOM element to make sortable
- options: Partial<SortableOptions> = {}
  Configuration options for the sortable behavior
Returns Sortable
Throws
SortableError When the provided element is invalid or options are malformed
Example
```
// Basic usage
const sortable = new Sortable(document.getElementById('list'));

// With options
const sortable = new Sortable(element, {
  animation: 150,
  ghostClass: 'ghost',
  chosenClass: 'chosen'
});
```
- Defined in src/index.ts:299

Properties

`Static` `Beta`active

active: Sortable | null = null

The currently active Sortable instance (if any drag is in progress)

Readonly

`Static` `Beta`dragged

dragged: HTMLElement | null = null

The currently dragged element (if any)

Readonly

`Static` `Beta`ghost

ghost: HTMLElement | null = null

The ghost element shown during drag (if any)

Readonly

`Static` `Beta`clone

clone: HTMLElement | null = null

The cloned element during clone operations (if any)

Readonly

`Static` `Beta`utils

utils: {
    on: <K extends keyof HTMLElementEventMap>(
        el: HTMLElement | Document,
        type: K,
        handler: (ev: HTMLElementEventMap[K]) => void,
    ) => () => void;
    off: <K extends keyof HTMLElementEventMap>(
        el: HTMLElement | Document,
        type: K,
        handler: (ev: HTMLElementEventMap[K]) => void,
    ) => void;
    index: (el: HTMLElement) => number;
    insertAt: (parent: HTMLElement, el: HTMLElement, index: number) => void;
    closest: (
        el: HTMLElement | null,
        selector: string,
        ctx?: HTMLElement,
    ) => HTMLElement | null;
    toggleClass: (el: HTMLElement, name: string, force?: boolean) => void;
    clone: <T extends HTMLElement>(el: T) => T;
} = ...

Utility functions for DOM operations

Type Declaration

on: <K extends keyof HTMLElementEventMap>(
    el: HTMLElement | Document,
    type: K,
    handler: (ev: HTMLElementEventMap[K]) => void,
) => () => void

Add an event listener and return an unsubscribe function
off: <K extends keyof HTMLElementEventMap>(
    el: HTMLElement | Document,
    type: K,
    handler: (ev: HTMLElementEventMap[K]) => void,
) => void

Remove a previously-registered event listener (symmetric to on)
index: (el: HTMLElement) => number

Get the index of an element within its parent
insertAt: (parent: HTMLElement, el: HTMLElement, index: number) => void

Insert an element at a specific index within a parent
closest: (
    el: HTMLElement | null,
    selector: string,
    ctx?: HTMLElement,
) => HTMLElement | null

Find the nearest ancestor matching selector, optionally bounded by ctx
toggleClass: (el: HTMLElement, name: string, force?: boolean) => void

Toggle a CSS class on an element; pass force to set explicitly
clone: <T extends HTMLElement>(el: T) => T

Deep-clone an element (cloneNode(true))

Public

`Readonly` `Beta`element

element: HTMLElement

The DOM element that this Sortable instance is bound to

Readonly

`Readonly` `Beta`options

options: SortableOptions

Current configuration options for this Sortable instance

Readonly

`Readonly` `Beta`dropZone

dropZone: DropZone

`Beta`dragManager

dragManager: DragManager

`Readonly` `Beta`eventSystem

eventSystem: EventSystem<SortableEvents>

`Optional` `Beta`_selectedItems

_selectedItems?: Set<HTMLElement>

`Optional` `Beta`_lastSelected

_lastSelected?: HTMLElement | null

`Optional` `Beta`_demoSelectInstalled

_demoSelectInstalled?: boolean

`Optional` `Beta`_demoSelectClickHandler

_demoSelectClickHandler?: (event: MouseEvent) => void

Methods

`Static`get

get(element: HTMLElement): Sortable | undefined
Beta
Gets the Sortable instance associated with a given element
Parameters
- element: HTMLElement
  The DOM element to look up
Returns Sortable | undefined
The Sortable instance, or undefined if none found
Example
```
const sortable = Sortable.get(document.getElementById('my-list'));
```
Public
- Defined in src/index.ts:161

`Static`mount

mount(plugin: SortablePlugin | SortablePlugin[]): void
Beta
Mount (register) a plugin globally so it can be used by any Sortable instance
Parameters
- plugin: SortablePlugin | SortablePlugin[]
  A SortablePlugin instance, or an array of plugins
Returns void
Example
```
import { Sortable } from 'resortable';
import { AutoScrollPlugin } from 'resortable/plugins';

Sortable.mount(AutoScrollPlugin.create());

// Mount multiple plugins at once
Sortable.mount([AutoScrollPlugin.create(), SwapPlugin.create()]);
```
Public
- Defined in src/index.ts:204

`Static`closest

closest(element: HTMLElement, selector?: string): Sortable | null
Beta
Finds the closest Sortable instance to a given element
Parameters
- element: HTMLElement
  The element to start searching from
- Optionalselector: string
  Optional CSS selector to filter parent elements
Returns Sortable | null
The closest Sortable instance, or null if none found
Example
```
const sortable = Sortable.closest(draggedElement);
if (sortable) {
  console.log('Found sortable:', sortable);
}
```
Example: With selector
```
const sortable = Sortable.closest(element, '.sortable-container');
```
Public
- Defined in src/index.ts:233

setDragCursor

setDragCursor(cursor: string | null): void
Beta
Set the cursor shown for the rest of the current drag, or clear it with null. Cleared automatically when the drag ends.
Parameters
- cursor: string | null
  A CSS cursor keyword, or null to restore the default
Returns void
Remarks
Use it to signal what a drop will do when only the consumer knows — a transfer that copies rather than moves, or a region that will reject the drop. CSS alone cannot do this: mid-drag the cursor is drawn from the pointer-capture target, not from whatever sits under the pointer.

On a native drag (nativeDrag) the browser owns the cursor and reads it from dropEffect, so only copy, move, link / alias and none / no-drop / not-allowed have any effect there.
Example
```
sortable.setDragCursor('copy')
```
Public
- Defined in src/index.ts:510

destroy

destroy(): void
Beta
Destroys the Sortable instance and removes all event listeners

Returns void
Remarks
After calling this method, the Sortable instance should not be used. All event listeners will be removed and the element will no longer be sortable.
Example
```
const sortable = new Sortable(element);
// ... use sortable ...
sortable.destroy(); // Clean up when done
```
Public
- Defined in src/index.ts:530

usePlugin

usePlugin(name: string): void
Beta
Install a plugin on this Sortable instance
Parameters
- name: string
  Name of the plugin to install
Returns void
Throws
Error if plugin is not registered or already installed
Example
```
const sortable = new Sortable(element);
sortable.usePlugin('AutoScroll');
```
Public
- Defined in src/index.ts:560

removePlugin

removePlugin(name: string): boolean
Beta
Uninstall a plugin from this Sortable instance
Parameters
- name: string
  Name of the plugin to uninstall
Returns boolean
true if plugin was found and uninstalled, false otherwise
Example
```
sortable.removePlugin('AutoScroll');
```
Public
- Defined in src/index.ts:577

hasPlugin

hasPlugin(name: string): boolean
Beta
Check if a plugin is installed on this instance
Parameters
- name: string
  Name of the plugin to check
Returns boolean
true if plugin is installed, false otherwise
Example
```
if (sortable.hasPlugin('AutoScroll')) {
  console.log('AutoScroll is active');
}
```
Public
- Defined in src/index.ts:596

getPlugins

getPlugins(): string[]
Beta
Get all installed plugin names for this instance

Returns string[]
Array of installed plugin names
Example
```
const plugins = sortable.getPlugins();
console.log('Installed plugins:', plugins);
```
Public
- Defined in src/index.ts:613

toArray

toArray(): string[]
Beta
Gets the current order of elements as an array of data-id attributes

Returns string[]
Array of string IDs representing the current order
Remarks
This method reads the data-id attribute from each sortable item. If an item doesn't have a data-id attribute, its index will be used. The attribute name can be customized using the dataIdAttr option.
Example
```
const sortable = new Sortable(element);
const order = sortable.toArray();
console.log('Current order:', order); // ['item-1', 'item-2', 'item-3']
```
Example: With custom data attribute
```
const sortable = new Sortable(element, { dataIdAttr: 'data-item-id' });
const order = sortable.toArray();
```
Public
- Defined in src/index.ts:642

sort

sort(order: string[], useAnimation?: boolean): void
Beta
Sorts the elements according to the given order of data-id values
Parameters
- order: string[]
  Array of data-id values representing the desired order
- useAnimation: boolean = true
  Whether to animate the reorder (default: true)
Returns void
Example
```
const sortable = new Sortable(element);
sortable.sort(['item-3', 'item-1', 'item-2']);
```
Example: Without animation
```
sortable.sort(['item-3', 'item-1', 'item-2'], false);
```
Public
- Defined in src/index.ts:665

save

save(): void

Beta

Save the current sort order using the configured store

Returns void

Remarks

Calls the store.set callback with this Sortable instance if configured. This allows persisting sort order to localStorage, a database, etc.

Example

const sortable = new Sortable(element, {
  store: {
    get: (sortable) => {
      const stored = localStorage.getItem('sort-order');
      return stored ? JSON.parse(stored) : [];
    },
    set: (sortable) => {
      localStorage.setItem('sort-order', JSON.stringify(sortable.toArray()));
    }
  }
});

// Later, manually trigger a save
sortable.save();

Public

option

option<K extends keyof SortableOptions>(name: K): SortableOptions[K]
Beta
Type Parameters
- K extends keyof SortableOptions
Parameters
- name: K
Returns SortableOptions[K]
- Defined in src/index.ts:741
option<K extends keyof SortableOptions>(
name: K,
value: SortableOptions[K],
): void
Beta
Type Parameters
- K extends keyof SortableOptions
Parameters
- name: K
- value: SortableOptions[K]
Returns void
- Defined in src/index.ts:742

Class SortableBeta

Remarks

Example: Creating a basic sortable list

Public

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns Sortable

Throws

Example

Properties

Static Betaactive

Readonly

Static Betadragged

Readonly

Static Betaghost

Readonly

Static Betaclone

Readonly

Static Betautils

Type Declaration

on: <K extends keyof HTMLElementEventMap>( el: HTMLElement | Document, type: K, handler: (ev: HTMLElementEventMap[K]) => void,) => () => void

off: <K extends keyof HTMLElementEventMap>( el: HTMLElement | Document, type: K, handler: (ev: HTMLElementEventMap[K]) => void,) => void

index: (el: HTMLElement) => number

insertAt: (parent: HTMLElement, el: HTMLElement, index: number) => void

closest: ( el: HTMLElement | null, selector: string, ctx?: HTMLElement,) => HTMLElement | null

toggleClass: (el: HTMLElement, name: string, force?: boolean) => void

clone: <T extends HTMLElement>(el: T) => T

Public

Readonly Betaelement

Readonly

Readonly Betaoptions

Readonly

Readonly BetadropZone

BetadragManager

Readonly BetaeventSystem

Optional Beta_selectedItems

Optional Beta_lastSelected

Optional Beta_demoSelectInstalled

Optional Beta_demoSelectClickHandler

Methods

Staticget

Parameters

Returns Sortable | undefined

Example

Public

Staticmount

Parameters

Returns void

Example

Public

Staticclosest

Parameters

Returns Sortable | null

Example

Example: With selector

Public

setDragCursor

Parameters

Returns void

Remarks

Example

Public

destroy

Returns void

Remarks

Example

Public

usePlugin

Parameters

Returns void

Throws

Example

Public

removePlugin

Parameters

Class Sortable`Beta`

`Static` `Beta`active

`Static` `Beta`dragged

`Static` `Beta`ghost

`Static` `Beta`clone

`Static` `Beta`utils

on: <K extends keyof HTMLElementEventMap>(
el: HTMLElement | Document,
type: K,
handler: (ev: HTMLElementEventMap[K]) => void,
) => () => void

off: <K extends keyof HTMLElementEventMap>(
el: HTMLElement | Document,
type: K,
handler: (ev: HTMLElementEventMap[K]) => void,
) => void

closest: (
el: HTMLElement | null,
selector: string,
ctx?: HTMLElement,
) => HTMLElement | null

`Readonly` `Beta`element

`Readonly` `Beta`options

`Readonly` `Beta`dropZone

`Beta`dragManager

`Readonly` `Beta`eventSystem

`Optional` `Beta`_selectedItems

`Optional` `Beta`_lastSelected

`Optional` `Beta`_demoSelectInstalled

`Optional` `Beta`_demoSelectClickHandler

`Static`get

`Static`mount

`Static`closest