README.md



MultiDrag Plugin

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


Mounting

import { Sortable, MultiDrag } from 'sortablejs';

Sortable.mount(new MultiDrag());


Options

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

    // 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
    }
});


multiDragKey option

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).


selectedClass option

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"
});


Event Properties


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.


Index Object


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


Note on newIndicies


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.


Sortable.utils


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