This plugin allows users to select multiple items within a sortable at once, and drag them as one item. Once placed, the items will unfold into their original order, but all beside each other at the new position. Read More

Demo: https://jsbin.com/wopavom/edit?js,output

import { Sortable, MultiDrag } from 'sortablejs';

Sortable.mount(new MultiDrag());

new Sortable(el, {
	multiDrag: true, // Enable the plugin
	selectedClass: "sortable-selected", // Class name for selected item
	multiDragKey: null, // Key that must be down for items to be selected
	avoidImplicitDeselect: false, // true - if you don't want to deselect items on outside click
	
	// Called when an item is selected
	onSelect: function(/**Event*/evt) {
		evt.item // The selected item
	},

	// Called when an item is deselected
	onDeselect: function(/**Event*/evt) {
		evt.item // The deselected item
	}
});

The key that must be down for multiple items to be selected. The default is null, meaning no key must be down. For special keys, such as the CTRL key, simply specify the option as 'CTRL' (casing does not matter).

Class name for the selected item(s) if multiDrag is enabled. Defaults to sortable-selected.

.selected {
  background-color: #f9c7c8;
  border: solid red 1px;
}

Sortable.create(list, {
  multiDrag: true,
  selectedClass: "selected"
});

• items:HTMLElement[] — Array of selected items, or empty
• clones:HTMLElement[] — Array of clones, or empty
• oldIndicies:Index[] — Array containing information on the old indicies of the selected elements.
• newIndicies:Index[] — Array containing information on the new indicies of the selected elements.

• element:HTMLElement — The element whose index is being given
• index:Number — The index of the element

For any event that is fired during sorting, the index of any selected element that is not the main dragged element is given as -1. This is because it has either been removed from the DOM, or because it is in a folding animation (folding to the dragged element) and will be removed after this animation is complete.

• select(el:HTMLElement) — select the given multi-drag item
• deselect(el:HTMLElement) — deselect the given multi-drag item