SortableJS

To provide custom default options or override existing ones, define a defaults object on the plugin instance. This can be done within the constructor function using the el parameter to access the DOM element, or by setting it on the plugin's prototype.

function myPlugin(sortable, el, options) {
	this.defaults = {
		color: el.style.backgroundColor
	};
}

Sortable.mount(myPlugin);

To allow dragging elements between different lists, both lists must share the same group name. You can fine-tune this behavior using pull and put.

• name: The group identifier.
• pull: Defines how items leave the list. Can be true, false, an array of group names, or 'clone' (to copy instead of move).
• put: Defines if the list can receive items from other groups (can be a boolean or an array of group names).
• revertClone: If true, cloned elements return to their original position after being moved.

// List A can pull from 'group1' and put into 'group1'
Sortable.create(elA, {
    group: {
        name: 'group1',
        pull: true,
        put: true
    }
});

// List B can only receive from 'group1' and clones items
Sortable.create(elB, {
    group: {
        name: 'group1',
        pull: 'clone',
        put: ['group1']
    }
});

By default, a plugin only receives events from Sortable instances where that plugin is explicitly enabled. To listen to events from Sortables that do not have the plugin enabled, use Global Events by appending the suffix Global to the event name (e.g., dragStartGlobal).

Important Requirements:

1. Initialization: Your plugin must still be initialized on any Sortable from which it expects to receive events (including global ones).
2. Default Behavior: Keep the initializeByDefault option set to its default true value to ensure the plugin can receive these events.
3. Execution Order: If both a normal and a global event handler are defined, the global event handler will always fire first.

When writing a Sortable plugin, events are fired within the context of the plugin instance itself. This means this refers to the plugin object, not the Sortable instance. To access the Sortable instance or the user-provided options, use the following properties:

• this.sortable: The Sortable instance associated with the plugin.
• this.options: The options object used to initialize the Sortable instance.

To use the MultiDrag plugin, you must first import both Sortable and MultiDrag from sortablejs, then register the plugin using Sortable.mount() before initializing your Sortable instances.

import { Sortable, MultiDrag } from 'sortablejs';

Sortable.mount(new MultiDrag());

The AutoScroll plugin enables automatic page scrolling when dragging near the edges of a scrollable element. It is particularly useful for mobile devices and older browsers (like IE9) and enhances native browser autoscrolling in modern browsers.

Note: This plugin is included by default in the standard UMD and ESM builds of Sortable, but you must explicitly mount it if you are using a modular approach.

import { Sortable, AutoScroll } from 'sortablejs';

Sortable.mount(new AutoScroll());

You can install SortableJS using NPM or Bower to add it to your project dependencies.

NPM:

npm install sortablejs --save

Bower:

bower install --save sortablejs

To use the Swap plugin, you must import it from the modular entry point and mount it to the Sortable instance using Sortable.mount(). This plugin changes Sortable's behavior from standard sorting to swapping: instead of reordering items, the dragged item will swap positions with the item it is dropped on.

import { Sortable, Swap } from 'sortablejs/modular/sortable.core.esm';

Sortable.mount(new Swap());

Sortable plugins allow you to modify the default behavior of Sortable beyond simple event handling. To create a plugin, you must define a constructor function and mount it using Sortable.mount(PluginConstructor).

When a Sortable instance is initialized with your plugin enabled, your constructor is called with new, receiving three arguments:

1. sortable: The Sortable instance the plugin is attached to.
2. el: The HTMLElement the Sortable is initialized on.
3. options: The raw options object passed by the user (before defaults are merged).

A new instance of your plugin is created for every Sortable instance that enables it.

function myPlugin(sortable, el, options) {
	this.defaults = {
		color: el.style.backgroundColor
	};
}

Sortable.mount(myPlugin);

The OnSpill plugins (RevertOnSpill and RemoveOnSpill) are included in the default UMD and ESM builds of Sortable. If you are using the modular core build, you must explicitly mount them using Sortable.mount. You can mount them individually or pass the OnSpill object (which contains both plugins) to Sortable.mount to enable both behaviors.

import { Sortable, OnSpill } from 'sortablejs/modular/sortable.core.esm';

Sortable.mount(OnSpill);

Depending on your needs, you can import different builds of SortableJS:

• Default SortableJS: Includes default plugins.
• Core SortableJS: A minimal build without default plugins.
• Complete SortableJS: Includes all plugins.

To use specific plugins with the core build, use Sortable.mount().

// Default SortableJS
import Sortable from 'sortablejs';

// Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.core.esm.js';

// Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js';

// Cherrypick extra plugins
import Sortable, { MultiDrag, Swap } from 'sortablejs';
Sortable.mount(new MultiDrag(), new Swap());

// Cherrypick default plugins
import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';
Sortable.mount(new AutoScroll());