Sortable   Financial Contributors on Open Collective CircleCI DeepScan grade npm

Sortable is a JavaScript library for reorderable drag-and-drop lists.

Demo: http://sortablejs.github.io/Sortable/

Features

  • Supports touch devices and modern browsers (including IE9)
  • Can drag from one list to another or within the same list
  • CSS animation when moving items
  • Supports drag handles and selectable text (better than voidberg's html5sortable)
  • Smart auto-scrolling
  • Advanced swap detection
  • Smooth animations
  • Multi-drag support
  • Support for CSS transforms
  • Built using native HTML5 drag and drop API
  • Supports
  • Supports any CSS library, e.g. Bootstrap
  • Simple API
  • Support for plugins
  • CDN
  • No jQuery required (but there is support)
  • Typescript definitions at @types/sortablejs

Articles


Getting Started

Install with NPM:

npm install sortablejs --save

Install with Bower:

bower install --save sortablejs

Import into your project:

// 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 plugins:

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

Usage

<ul id="items">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>
var el = document.getElementById('items');
var sortable = Sortable.create(el);

You can use any element for the list and its elements, not just ul/li. Here is an example with divs.


Options

var sortable = new Sortable(el, {
	group: "name",  // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
	sort: true,  // sorting inside list
	delay: 0, // time in milliseconds to define when the sorting should start
	delayOnTouchOnly: false, // only delay if user is using touch
	touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
	disabled: false, // Disables the sortable if set to true.
	store: null,  // @see Store
	animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
	easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.
	handle: ".my-handle",  // Drag handle selector within list items
	filter: ".ignore-elements",  // Selectors that do not lead to dragging (String or Function)
	preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
	draggable: ".item",  // Specifies which items inside the element should be draggable

	dataIdAttr: 'data-id', // HTML attribute that is used by the `toArray()` method

	ghostClass: "sortable-ghost",  // Class name for the drop placeholder
	chosenClass: "sortable-chosen",  // Class name for the chosen item
	dragClass: "sortable-drag",  // Class name for the dragging item

	swapThreshold: 1, // Threshold of the swap zone
	invertSwap: false, // Will always use inverted swap zone if set to true
	invertedSwapThreshold: 1, // Threshold of the inverted swap zone (will be set to swapThreshold value by default)
	direction: 'horizontal', // Direction of Sortable (will be detected automatically if not given)

	forceFallback: false,  // ignore the HTML5 DnD behaviour and force the fallback to kick in

	fallbackClass: "sortable-fallback",  // Class name for the cloned DOM Element when using forceFallback
	fallbackOnBody: false,  // Appends the cloned DOM Element into the Document's Body
	fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.

	dragoverBubble: false,
	removeCloneOnHide: true, // Remove the clone element when it is not showing, rather than just hiding it
	emptyInsertThreshold: 5, // px, distance mouse must be from empty sortable to insert drag element into it


	setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
		dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
	},

	// Element is chosen
	onChoose: function (/**Event*/evt) {
		evt.oldIndex;  // element index within parent
	},

	// Element is unchosen
	onUnchoose: function(/**Event*/evt) {
		// same properties as onEnd
	},

	// Element dragging started
	onStart: function (/**Event*/evt) {
		evt.oldIndex;  // element index within parent
	},

	// Element dragging ended
	onEnd: function (/**Event*/evt) {
		var itemEl = evt.item;  // dragged HTMLElement
		evt.to;    // target list
		evt.from;  // previous list
		evt.oldIndex;  // element's old index within old parent
		evt.newIndex;  // element's new index within new parent
		evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
		evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
		evt.clone // the clone element
		evt.pullMode;  // when item is in another sortable: `"clone"` if cloning, `true` if moving
	},

	// Element is dropped into the list from another list
	onAdd: function (/**Event*/evt) {
		// same properties as onEnd
	},

	// Changed sorting within list
	onUpdate: function (/**Event*/evt) {
		// same properties as onEnd
	},

	// Called by any change to the list (add / update / remove)
	onSort: function (/**Event*/evt) {
		// same properties as onEnd
	},

	// Element is removed from the list into another list
	onRemove: function (/**Event*/evt) {
		// same properties as onEnd
	},

	// Attempt to drag a filtered element
	onFilter: function (/**Event*/evt) {
		var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
	},

	// Event when you move an item in the list or between lists
	onMove: function (/**Event*/evt, /**Event*/originalEvent) {
		// Example: https://jsbin.com/nawahef/edit?js,output
		evt.dragged; // dragged HTMLElement
		evt.draggedRect; // DOMRect {left, top, right, bottom}
		evt.related; // HTMLElement on which have guided
		evt.relatedRect; // DOMRect
		evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default
		originalEvent.clientY; // mouse position
		// return false; — for cancel
		// return -1; — insert before target
		// return 1; — insert after target
		// return true; — keep default insertion point based on the direction
		// return void; — keep default insertion point based on the direction
	},

	// Called when creating a clone of element
	onClone: function (/**Event*/evt) {
		var origEl = evt.item;
		var cloneEl = evt.clone;
	},

	// Called when dragging element changes position
	onChange: function(/**Event*/evt) {
		evt.newIndex // most likely why this event is used is to get the dragging element's current index
		// same properties as onEnd
	}
});

group option

To drag elements from one list into another, both lists must have the same group value. You can also define whether lists can give away, give and keep a copy (clone), and receive elements.

  • name: String — group name
  • pull: true|false|["foo", "bar"]|'clone'|function — ability to move from the list. clone — copy the item, rather than move. Or an array of group names which the elements may be put in. Defaults to true.
  • put: true|false|["baz", "qux"]|function — whether elements can be added from other lists, or an array of group names from which elements can be added.
  • revertClone: boolean — revert cloned element to initial position after moving to a another list.

Demo:


sort option

Allow sorting inside list.

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


delay option

Time in milliseconds to define when the sorting should start. Unfortunately, due to browser restrictions, delaying is not possible on IE or Edge with native drag & drop.

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


delayOnTouchOnly option

Whether or not the delay should be applied only if the user is using touch (eg. on a mobile device). No delay will be applied in any other case. Defaults to false.


swapThreshold option

Percentage of the target that the swap zone will take up, as a float between 0 and 1.

Read more

Demo: http://sortablejs.github.io/Sortable#thresholds


invertSwap option

Set to true to set the swap zone to the sides of the target, for the effect of sorting "in between" items.

Read more

Demo: http://sortablejs.github.io/Sortable#thresholds


invertedSwapThreshold option

Percentage of the target that the inverted swap zone will take up, as a float between 0 and 1. If not given, will default to swapThreshold.

Read more


direction option

Direction that the Sortable should sort in. Can be set to 'vertical', 'horizontal', or a function, which will be called whenever a target is dragged over. Must return 'vertical' or 'horizontal'.

Read more

Example of direction detection for vertical list that includes full column and half column elements:

Sortable.create(el, {
	direction: function(evt, target, dragEl) {
		if (target !== null && target.className.includes('half-column') && dragEl.className.includes('half-column')) {
			return 'horizontal';
		}
		return 'vertical';
	}
});

touchStartThreshold option

This option is similar to fallbackTolerance option.

When the delay option is set, some phones with very sensitive touch displays like the Samsung Galaxy S8 will fire unwanted touchmove events even when your finger is not moving, resulting in the sort not triggering.

This option sets the minimum pointer movement that must occur before the delayed sorting is cancelled.

Values between 3 to 5 are good.


disabled options

Disables the sortable if set to true.

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

var sortable = Sortable.create(list);

document.getElementById("switcher").onclick = function () {
	var state = sortable.option("disabled"); // get

	sortable.option("disabled", !state); // set
};

handle option

To make list items draggable, Sortable disables text selection by the user. That's not always desirable. To allow text selection, define a drag handler, which is an area of every list element that allows it to be dragged around.

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

Sortable.create(el, {
	handle: ".my-handle"
});
<ul>
	<li><span class="my-handle">::</span> list item text one
	<li><span class="my-handle">::</span> list item text two
</ul>
.my-handle {
	cursor: move;
	cursor: -webkit-grabbing;
}

filter option

Sortable.create(list, {
	filter: ".js-remove, .js-edit",
	onFilter: function (evt) {
		var item = evt.item,
			ctrl = evt.target;

		if (Sortable.utils.is(ctrl, ".js-remove")) {  // Click on remove button
			item.parentNode.removeChild(item); // remove sortable item
		}
		else if (Sortable.utils.is(ctrl, ".js-edit")) {  // Click on edit link
			// ...
		}
	}
})

ghostClass option

Class name for the drop placeholder (default sortable-ghost).

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

.ghost {
  opacity: 0.4;
}
Sortable.create(list, {
  ghostClass: "ghost"
});

chosenClass option

Class name for the chosen item (default sortable-chosen).

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

.chosen {
  color: #fff;
  background-color: #c00;
}
Sortable.create(list, {
  delay: 500,
  chosenClass: "chosen"
});

forceFallback option

If set to true, the Fallback for non HTML5 Browser will be used, even if we are using an HTML5 Browser. This gives us the possibility to test the behaviour for older Browsers even in newer Browser, or make the Drag 'n Drop feel more consistent between Desktop , Mobile and old Browsers.

On top of that, the Fallback always generates a copy of that DOM Element and appends the class fallbackClass defined in the options. This behaviour controls the look of this 'dragged' Element.

Demo: https://jsbin.com/sibiput/edit?html,css,js,output


fallbackTolerance option

Emulates the native drag threshold. Specify in pixels how far the mouse should move before it's considered as a drag. Useful if the items are also clickable like in a list of links.

When the user clicks inside a sortable element, it's not uncommon for your hand to move a little between the time you press and the time you release. Dragging only starts if you move the pointer past a certain tolerance, so that you don't accidentally start dragging every time you click.

3 to 5 are probably good values.


dragoverBubble option

If set to true, the dragover event will bubble to parent sortables. Works on both fallback and native dragover event. By default, it is false, but Sortable will only stop bubbling the event once the element has been inserted into a parent Sortable, or can be inserted into a parent Sortable, but isn't at that specific time (due to animation, etc).

Since 1.8.0, you will probably want to leave this option as false. Before 1.8.0, it may need to be true for nested sortables to work.


removeCloneOnHide option

If set to false, the clone is hidden by having it's CSS display property set to none. By default, this option is true, meaning Sortable will remove the cloned element from the DOM when it is supposed to be hidden.


emptyInsertThreshold option

The distance (in pixels) the mouse must be from an empty sortable while dragging for the drag element to be inserted into that sortable. Defaults to 5. Set to 0 to disable this feature.

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

An alternative to this option would be to set a padding on your list when it is empty.

For example:

ul:empty {
  padding-bottom: 20px;
}

Warning: For :empty to work, it must have no node inside (even text one).

Demo: https://jsbin.com/yunakeg/edit?html,css,js,output


Event object (demo)

  • to:HTMLElement — list, in which moved element
  • from:HTMLElement — previous list
  • item:HTMLElement — dragged element
  • clone:HTMLElement
  • oldIndex:Number|undefined — old index within parent
  • newIndex:Number|undefined — new index within parent
  • oldDraggableIndex: Number|undefined — old index within parent, only counting draggable elements
  • newDraggableIndex: Number|undefined — new index within parent, only counting draggable elements
  • pullMode:String|Boolean|undefined — Pull mode if dragging into another sortable ("clone", true, or false), otherwise undefined

move event object

  • to:HTMLElement
  • from:HTMLElement
  • dragged:HTMLElement
  • draggedRect:DOMRect
  • related:HTMLElement — element on which have guided
  • relatedRect:DOMRect
  • willInsertAfter:Booleantrue if will element be inserted after target (or false if before)

Methods

option(name:String[, value:*]):*

Get or set the option.

closest(el:HTMLElement[, selector:String]):HTMLElement|null

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

toArray():String[]

Serializes the sortable's item data-id's (dataIdAttr option) into an array of string.

sort(order:String[], useAnimation:Boolean)

Sorts the elements according to the array.

var order = sortable.toArray();
sortable.sort(order.reverse(), true); // apply
save()

Save the current sorting (see store)

destroy()

Removes the sortable functionality completely.


Store

Saving and restoring of the sort.

<ul>
	<li data-id="1">order</li>
	<li data-id="2">save</li>
	<li data-id="3">restore</li>
</ul>
Sortable.create(el, {
	group: "localStorage-example",
	store: {
		/**
		 * Get the order of elements. Called once during initialization.
		 * @param   {Sortable}  sortable
		 * @returns {Array}
		 */
		get: function (sortable) {
			var order = localStorage.getItem(sortable.options.group.name);
			return order ? order.split('|') : [];
		},

		/**
		 * Save the order of elements. Called onEnd (when the item is dropped).
		 * @param {Sortable}  sortable
		 */
		set: function (sortable) {
			var order = sortable.toArray();
			localStorage.setItem(sortable.options.group.name, order.join('|'));
		}
	}
})

Bootstrap

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

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>


<!-- Latest Sortable -->
<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>


<!-- Simple List -->
<ul id="simpleList" class="list-group">
	<li class="list-group-item">This is <a href="http://SortableJS.github.io/Sortable/">Sortable</a></li>
	<li class="list-group-item">It works with Bootstrap...</li>
	<li class="list-group-item">...out of the box.</li>
	<li class="list-group-item">It has support for touch devices.</li>
	<li class="list-group-item">Just drag some elements around.</li>
</ul>

<script>
    // Simple list
    Sortable.create(simpleList, { /* options */ });
</script>

Static methods & properties

Sortable.create(el:HTMLElement[, options:Object]):Sortable

Create new instance.


Sortable.active:Sortable

The active Sortable instance.


Sortable.dragged:HTMLElement

The element being dragged.


Sortable.ghost:HTMLElement

The ghost element.


Sortable.clone:HTMLElement

The clone element.


Sortable.get(element:HTMLElement):Sortable

Get the Sortable instance on an element.


Sortable.mount(plugin:...SortablePlugin|SortablePlugin[])

Mounts a plugin to Sortable.


Sortable.utils
  • on(el:HTMLElement, event:String, fn:Function) — attach an event handler function
  • off(el:HTMLElement, event:String, fn:Function) — remove an event handler
  • css(el:HTMLElement):Object — get the values of all the CSS properties
  • css(el:HTMLElement, prop:String):Mixed — get the value of style properties
  • css(el:HTMLElement, prop:String, value:String) — set one CSS properties
  • css(el:HTMLElement, props:Object) — set more CSS properties
  • find(ctx:HTMLElement, tagName:String[, iterator:Function]):Array — get elements by tag name
  • bind(ctx:Mixed, fn:Function):Function — Takes a function and returns a new one that will always have a particular context
  • is(el:HTMLElement, selector:String):Boolean — check the current matched set of elements against a selector
  • closest(el:HTMLElement, selector:String[, ctx:HTMLElement]):HTMLElement|Null — for each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
  • clone(el:HTMLElement):HTMLElement — create a deep copy of the set of matched elements
  • toggleClass(el:HTMLElement, name:String, state:Boolean) — add or remove one classes from each element
  • detectDirection(el:HTMLElement):String — automatically detect the direction of the element as either 'vertical' or 'horizontal'

Plugins

Extra Plugins (included in complete versions)

Default Plugins (included in default versions)


CDN

<!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

Contributing (Issue/PR)

Please, read this.


Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

MIT LICENSE

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

SortableJS/Sortable

{
"props": {
"initialPayload": {
"allShortcutsEnabled": false,
"path": "/",
"repo": {
"id": 15308499,
"defaultBranch": "master",
"name": "Sortable",
"ownerLogin": "SortableJS",
"currentUserCanPush": false,
"isFork": false,
"isEmpty": false,
"createdAt": "2013-12-19T10:10:13.000Z",
"ownerAvatar": "https://avatars.githubusercontent.com/u/17040762?v=4",
"public": true,
"private": false,
"isOrgOwned": true
},
"currentUser": null,
"refInfo": {
"name": "master",
"listCacheKey": "v0:1705192228.0",
"canEdit": false,
"refType": "branch",
"currentOid": "07708fa1e7d9cf9d4563a7b1a09f7a47771522ed"
},
"tree": {
"items": [
{
"name": ".circleci",
"path": ".circleci",
"contentType": "directory"
},
{
"name": ".github/ISSUE_TEMPLATE",
"path": ".github/ISSUE_TEMPLATE",
"contentType": "directory",
"hasSimplifiedPath": true
},
{
"name": "entry",
"path": "entry",
"contentType": "directory"
},
{
"name": "modular",
"path": "modular",
"contentType": "directory"
},
{
"name": "plugins",
"path": "plugins",
"contentType": "directory"
},
{
"name": "scripts",
"path": "scripts",
"contentType": "directory"
},
{
"name": "src",
"path": "src",
"contentType": "directory"
},
{
"name": "st",
"path": "st",
"contentType": "directory"
},
{
"name": "tests",
"path": "tests",
"contentType": "directory"
},
{
"name": ".editorconfig",
"path": ".editorconfig",
"contentType": "file"
},
{
"name": ".gitignore",
"path": ".gitignore",
"contentType": "file"
},
{
"name": ".jshintrc",
"path": ".jshintrc",
"contentType": "file"
},
{
"name": ".testcaferc.json",
"path": ".testcaferc.json",
"contentType": "file"
},
{
"name": "CONTRIBUTING.md",
"path": "CONTRIBUTING.md",
"contentType": "file"
},
{
"name": "LICENSE",
"path": "LICENSE",
"contentType": "file"
},
{
"name": "README.md",
"path": "README.md",
"contentType": "file"
},
{
"name": "Sortable.js",
"path": "Sortable.js",
"contentType": "file"
},
{
"name": "Sortable.min.js",
"path": "Sortable.min.js",
"contentType": "file"
},
{
"name": "babel.config.js",
"path": "babel.config.js",
"contentType": "file"
},
{
"name": "bower.json",
"path": "bower.json",
"contentType": "file"
},
{
"name": "index.html",
"path": "index.html",
"contentType": "file"
},
{
"name": "package-lock.json",
"path": "package-lock.json",
"contentType": "file"
},
{
"name": "package.json",
"path": "package.json",
"contentType": "file"
}
],
"templateDirectorySuggestionUrl": null,
"readme": null,
"totalCount": 23,
"showBranchInfobar": false
},
"fileTree": null,
"fileTreeProcessingTime": null,
"foldersToFetch": [],
"treeExpanded": false,
"symbolsExpanded": false,
"isOverview": true,
"overview": {
"banners": {
"shouldRecommendReadme": false,
"isPersonalRepo": false,
"showUseActionBanner": false,
"actionSlug": null,
"actionId": null,
"showProtectBranchBanner": false,
"recentlyTouchedDataChannel": null,
"publishBannersInfo": {
"dismissActionNoticePath": "/settings/dismiss-notice/publish_action_from_repo",
"releasePath": "/SortableJS/Sortable/releases/new?marketplace=true",
"showPublishActionBanner": false
},
"interactionLimitBanner": null,
"showInvitationBanner": false,
"inviterName": null
},
"codeButton": {
"contactPath": "/contact",
"isEnterprise": false,
"local": {
"protocolInfo": {
"httpAvailable": true,
"sshAvailable": null,
"httpUrl": "https://github.com/SortableJS/Sortable.git",
"showCloneWarning": null,
"sshUrl": null,
"sshCertificatesRequired": null,
"sshCertificatesAvailable": null,
"ghCliUrl": "gh repo clone SortableJS/Sortable",
"defaultProtocol": "http",
"newSshKeyUrl": "/settings/ssh/new",
"setProtocolPath": "/users/set_protocol"
},
"platformInfo": {
"cloneUrl": "https://desktop.github.com",
"showVisualStudioCloneButton": false,
"visualStudioCloneUrl": "https://windows.github.com",
"showXcodeCloneButton": false,
"xcodeCloneUrl": "https://developer.apple.com",
"zipballUrl": "/SortableJS/Sortable/archive/refs/heads/master.zip"
}
},
"newCodespacePath": "/codespaces/new?hide_repo_select=true&repo=15308499"
},
"popovers": {
"rename": null,
"renamedParentRepo": null
},
"commitCount": "1,091",
"overviewFiles": [
{
"displayName": "README.md",
"repoName": "Sortable",
"refName": "master",
"path": "README.md",
"preferredFileType": "readme",
"tabName": "README",
"richText": "<article class=\"markdown-body entry-content container-lg\" itemprop=\"text\"><h1 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sortable------\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sortable------\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Sortable   <a href=\"https://opencollective.com/Sortable\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/6ae385b9cc44b7e8105ef126a61851db9e207314248573d304f7a053920476b7/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f616c6c2f62616467652e7376673f6c6162656c3d66696e616e6369616c2b636f6e7472696275746f7273\" alt=\"Financial Contributors on Open Collective\" data-canonical-src=\"https://opencollective.com/Sortable/all/badge.svg?label=financial+contributors\" style=\"max-width: 100%;\"></a> <a href=\"https://circleci.com/gh/SortableJS/Sortable\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/03284846f58039ed5320fca8ef83f8e91c79bb0bb30933108dbb1926353635e0/68747470733a2f2f636972636c6563692e636f6d2f67682f536f727461626c654a532f536f727461626c652e7376673f7374796c653d737667\" alt=\"CircleCI\" data-canonical-src=\"https://circleci.com/gh/SortableJS/Sortable.svg?style=svg\" style=\"max-width: 100%;\"></a> <a href=\"https://deepscan.io/dashboard#view=project&amp;tid=3901&amp;pid=5666&amp;bid=43977\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/1be8de1e253b9c440793e997ce8b9a9388383feff3a6a873b0adca9b93ba9bab/68747470733a2f2f646565707363616e2e696f2f6170692f7465616d732f333930312f70726f6a656374732f353636362f6272616e636865732f34333937372f62616467652f67726164652e737667\" alt=\"DeepScan grade\" data-canonical-src=\"https://deepscan.io/api/teams/3901/projects/5666/branches/43977/badge/grade.svg\" style=\"max-width: 100%;\"></a> <a href=\"https://www.jsdelivr.com/package/npm/sortablejs\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/a93160f5ba9fc9d3e7a9a401ec035901c18bb1bcedd55e2892581130dbff45f4/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f6e706d2f736f727461626c656a732f6261646765\" alt=\"\" data-canonical-src=\"https://data.jsdelivr.com/v1/package/npm/sortablejs/badge\" style=\"max-width: 100%;\"></a> <a href=\"https://www.npmjs.com/package/sortablejs\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/fe0c53eaad92149cea584720286f6dca16977c9575edf4b9b6961678b5b74cf2/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f736f727461626c656a732e737667\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/npm/v/sortablejs.svg\" style=\"max-width: 100%;\"></a></h1>\n<p dir=\"auto\">Sortable is a JavaScript library for reorderable drag-and-drop lists.</p>\n<p dir=\"auto\">Demo: <a href=\"http://sortablejs.github.io/Sortable/\" rel=\"nofollow\">http://sortablejs.github.io/Sortable/</a></p>\n<p dir=\"auto\"><a href=\"https://saucelabs.com/\" rel=\"nofollow\"><img width=\"250px\" src=\"https://raw.githubusercontent.com/SortableJS/Sortable/HEAD/st/saucelabs.svg?sanitize=true\" style=\"max-width: 100%;\"></a></p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-features\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#features\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Features</h2>\n<ul dir=\"auto\">\n<li>Supports touch devices and <a href=\"http://caniuse.com/#search=drag\" rel=\"nofollow\">modern</a> browsers (including IE9)</li>\n<li>Can drag from one list to another or within the same list</li>\n<li>CSS animation when moving items</li>\n<li>Supports drag handles <em>and selectable text</em> (better than voidberg's html5sortable)</li>\n<li>Smart auto-scrolling</li>\n<li>Advanced swap detection</li>\n<li>Smooth animations</li>\n<li><a href=\"https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag\">Multi-drag</a> support</li>\n<li>Support for CSS transforms</li>\n<li>Built using native HTML5 drag and drop API</li>\n<li>Supports\n<ul dir=\"auto\">\n<li><a href=\"https://github.com/SortableJS/meteor-sortablejs\">Meteor</a></li>\n<li>Angular\n<ul dir=\"auto\">\n<li><a href=\"https://github.com/SortableJS/angular-sortablejs\">2.0+</a></li>\n<li><a href=\"https://github.com/SortableJS/angular-legacy-sortablejs\">1.*</a></li>\n</ul>\n</li>\n<li>React\n<ul dir=\"auto\">\n<li><a href=\"https://github.com/SortableJS/react-sortablejs\">ES2015+</a></li>\n<li><a href=\"https://github.com/SortableJS/react-mixin-sortablejs\">Mixin</a></li>\n</ul>\n</li>\n<li><a href=\"https://github.com/SortableJS/knockout-sortablejs\">Knockout</a></li>\n<li><a href=\"https://github.com/SortableJS/polymer-sortablejs\">Polymer</a></li>\n<li><a href=\"https://github.com/SortableJS/Vue.Draggable\">Vue</a></li>\n<li><a href=\"https://github.com/SortableJS/ember-sortablejs\">Ember</a></li>\n</ul>\n</li>\n<li>Supports any CSS library, e.g. <a href=\"#bs\">Bootstrap</a></li>\n<li>Simple API</li>\n<li>Support for <a href=\"#plugins\">plugins</a></li>\n<li><a href=\"#cdn\">CDN</a></li>\n<li>No jQuery required (but there is <a href=\"https://github.com/SortableJS/jquery-sortablejs\">support</a>)</li>\n<li>Typescript definitions at <code>@types/sortablejs</code></li>\n</ul>\n<br>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-articles\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#articles\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Articles</h3>\n<ul dir=\"auto\">\n<li><a href=\"https://github.com/SortableJS/Sortable/wiki/Dragging-Multiple-Items-in-Sortable\">Dragging Multiple Items in Sortable</a> (April 26, 2019)</li>\n<li><a href=\"https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction\">Swap Thresholds and Direction</a> (December 2, 2018)</li>\n<li><a href=\"https://github.com/SortableJS/Sortable/wiki/Sortable-v1.0-%E2%80%94-New-capabilities/\">Sortable v1.0 — New capabilities</a> (December 22, 2014)</li>\n<li><a href=\"https://github.com/SortableJS/Sortable/wiki/Sorting-with-the-help-of-HTML5-Drag'n'Drop-API/\">Sorting with the help of HTML5 Drag'n'Drop API</a> (December 23, 2013)</li>\n</ul>\n<br>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-getting-started\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#getting-started\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Getting Started</h3>\n<p dir=\"auto\">Install with NPM:</p>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npm install sortablejs --save\"><pre>npm install sortablejs --save</pre></div>\n<p dir=\"auto\">Install with Bower:</p>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"bower install --save sortablejs\"><pre>bower install --save sortablejs</pre></div>\n<p dir=\"auto\">Import into your project:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// Default SortableJS\nimport Sortable from 'sortablejs';\n\n// Core SortableJS (without default plugins)\nimport Sortable from 'sortablejs/modular/sortable.core.esm.js';\n\n// Complete SortableJS (with all plugins)\nimport Sortable from 'sortablejs/modular/sortable.complete.esm.js';\"><pre><span class=\"pl-c\">// Default SortableJS</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-v\">Sortable</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'sortablejs'</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-c\">// Core SortableJS (without default plugins)</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-v\">Sortable</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'sortablejs/modular/sortable.core.esm.js'</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-c\">// Complete SortableJS (with all plugins)</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-v\">Sortable</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'sortablejs/modular/sortable.complete.esm.js'</span><span class=\"pl-kos\">;</span></pre></div>\n<p dir=\"auto\">Cherrypick plugins:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"// Cherrypick extra plugins\nimport Sortable, { MultiDrag, Swap } from 'sortablejs';\n\nSortable.mount(new MultiDrag(), new Swap());\n\n\n// Cherrypick default plugins\nimport Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';\n\nSortable.mount(new AutoScroll());\"><pre><span class=\"pl-c\">// Cherrypick extra plugins</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span> <span class=\"pl-v\">MultiDrag</span><span class=\"pl-kos\">,</span> <span class=\"pl-v\">Swap</span> <span class=\"pl-kos\">}</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'sortablejs'</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">mount</span><span class=\"pl-kos\">(</span><span class=\"pl-k\">new</span> <span class=\"pl-v\">MultiDrag</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span> <span class=\"pl-k\">new</span> <span class=\"pl-v\">Swap</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n\n\n<span class=\"pl-c\">// Cherrypick default plugins</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span> <span class=\"pl-v\">AutoScroll</span> <span class=\"pl-kos\">}</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'sortablejs/modular/sortable.core.esm.js'</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">mount</span><span class=\"pl-kos\">(</span><span class=\"pl-k\">new</span> <span class=\"pl-v\">AutoScroll</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<hr>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-usage\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#usage\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Usage</h3>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;ul id=&quot;items&quot;&gt;\n\t&lt;li&gt;item 1&lt;/li&gt;\n\t&lt;li&gt;item 2&lt;/li&gt;\n\t&lt;li&gt;item 3&lt;/li&gt;\n&lt;/ul&gt;\"><pre><span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">ul</span> <span class=\"pl-c1\">id</span>=\"<span class=\"pl-s\">items</span>\"<span class=\"pl-kos\">&gt;</span>\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>item 1<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>item 2<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>item 3<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>\n<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">ul</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var el = document.getElementById('items');\nvar sortable = Sortable.create(el);\"><pre><span class=\"pl-k\">var</span> <span class=\"pl-s1\">el</span> <span class=\"pl-c1\">=</span> <span class=\"pl-smi\">document</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">getElementById</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'items'</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">var</span> <span class=\"pl-s1\">sortable</span> <span class=\"pl-c1\">=</span> <span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">create</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">el</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<p dir=\"auto\">You can use any element for the list and its elements, not just <code>ul</code>/<code>li</code>. Here is an <a href=\"https://jsbin.com/visimub/edit?html,js,output\" rel=\"nofollow\">example with <code>div</code>s</a>.</p>\n<hr>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-options\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#options\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Options</h3>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var sortable = new Sortable(el, {\n\tgroup: &quot;name&quot;, // or { name: &quot;...&quot;, pull: [true, false, 'clone', array], put: [true, false, array] }\n\tsort: true, // sorting inside list\n\tdelay: 0, // time in milliseconds to define when the sorting should start\n\tdelayOnTouchOnly: false, // only delay if user is using touch\n\ttouchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event\n\tdisabled: false, // Disables the sortable if set to true.\n\tstore: null, // @see Store\n\tanimation: 150, // ms, animation speed moving items when sorting, `0` — without animation\n\teasing: &quot;cubic-bezier(1, 0, 0, 1)&quot;, // Easing for animation. Defaults to null. See https://easings.net/ for examples.\n\thandle: &quot;.my-handle&quot;, // Drag handle selector within list items\n\tfilter: &quot;.ignore-elements&quot;, // Selectors that do not lead to dragging (String or Function)\n\tpreventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`\n\tdraggable: &quot;.item&quot;, // Specifies which items inside the element should be draggable\n\n\tdataIdAttr: 'data-id', // HTML attribute that is used by the `toArray()` method\n\n\tghostClass: &quot;sortable-ghost&quot;, // Class name for the drop placeholder\n\tchosenClass: &quot;sortable-chosen&quot;, // Class name for the chosen item\n\tdragClass: &quot;sortable-drag&quot;, // Class name for the dragging item\n\n\tswapThreshold: 1, // Threshold of the swap zone\n\tinvertSwap: false, // Will always use inverted swap zone if set to true\n\tinvertedSwapThreshold: 1, // Threshold of the inverted swap zone (will be set to swapThreshold value by default)\n\tdirection: 'horizontal', // Direction of Sortable (will be detected automatically if not given)\n\n\tforceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in\n\n\tfallbackClass: &quot;sortable-fallback&quot;, // Class name for the cloned DOM Element when using forceFallback\n\tfallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body\n\tfallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.\n\n\tdragoverBubble: false,\n\tremoveCloneOnHide: true, // Remove the clone element when it is not showing, rather than just hiding it\n\temptyInsertThreshold: 5, // px, distance mouse must be from empty sortable to insert drag element into it\n\n\n\tsetData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {\n\t\tdataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent\n\t},\n\n\t// Element is chosen\n\tonChoose: function (/**Event*/evt) {\n\t\tevt.oldIndex; // element index within parent\n\t},\n\n\t// Element is unchosen\n\tonUnchoose: function(/**Event*/evt) {\n\t\t// same properties as onEnd\n\t},\n\n\t// Element dragging started\n\tonStart: function (/**Event*/evt) {\n\t\tevt.oldIndex; // element index within parent\n\t},\n\n\t// Element dragging ended\n\tonEnd: function (/**Event*/evt) {\n\t\tvar itemEl = evt.item; // dragged HTMLElement\n\t\tevt.to; // target list\n\t\tevt.from; // previous list\n\t\tevt.oldIndex; // element's old index within old parent\n\t\tevt.newIndex; // element's new index within new parent\n\t\tevt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements\n\t\tevt.newDraggableIndex; // element's new index within new parent, only counting draggable elements\n\t\tevt.clone // the clone element\n\t\tevt.pullMode; // when item is in another sortable: `&quot;clone&quot;` if cloning, `true` if moving\n\t},\n\n\t// Element is dropped into the list from another list\n\tonAdd: function (/**Event*/evt) {\n\t\t// same properties as onEnd\n\t},\n\n\t// Changed sorting within list\n\tonUpdate: function (/**Event*/evt) {\n\t\t// same properties as onEnd\n\t},\n\n\t// Called by any change to the list (add / update / remove)\n\tonSort: function (/**Event*/evt) {\n\t\t// same properties as onEnd\n\t},\n\n\t// Element is removed from the list into another list\n\tonRemove: function (/**Event*/evt) {\n\t\t// same properties as onEnd\n\t},\n\n\t// Attempt to drag a filtered element\n\tonFilter: function (/**Event*/evt) {\n\t\tvar itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.\n\t},\n\n\t// Event when you move an item in the list or between lists\n\tonMove: function (/**Event*/evt, /**Event*/originalEvent) {\n\t\t// Example: https://jsbin.com/nawahef/edit?js,output\n\t\tevt.dragged; // dragged HTMLElement\n\t\tevt.draggedRect; // DOMRect {left, top, right, bottom}\n\t\tevt.related; // HTMLElement on which have guided\n\t\tevt.relatedRect; // DOMRect\n\t\tevt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default\n\t\toriginalEvent.clientY; // mouse position\n\t\t// return false; — for cancel\n\t\t// return -1; — insert before target\n\t\t// return 1; — insert after target\n\t\t// return true; — keep default insertion point based on the direction\n\t\t// return void; — keep default insertion point based on the direction\n\t},\n\n\t// Called when creating a clone of element\n\tonClone: function (/**Event*/evt) {\n\t\tvar origEl = evt.item;\n\t\tvar cloneEl = evt.clone;\n\t},\n\n\t// Called when dragging element changes position\n\tonChange: function(/**Event*/evt) {\n\t\tevt.newIndex // most likely why this event is used is to get the dragging element's current index\n\t\t// same properties as onEnd\n\t}\n});\"><pre><span class=\"pl-k\">var</span> <span class=\"pl-s1\">sortable</span> <span class=\"pl-c1\">=</span> <span class=\"pl-k\">new</span> <span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">el</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span>\n\t<span class=\"pl-c1\">group</span>: <span class=\"pl-s\">\"name\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// or { name: \"...\", pull: [true, false, 'clone', array], put: [true, false, array] }</span>\n\t<span class=\"pl-c1\">sort</span>: <span class=\"pl-c1\">true</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// sorting inside list</span>\n\t<span class=\"pl-c1\">delay</span>: <span class=\"pl-c1\">0</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// time in milliseconds to define when the sorting should start</span>\n\t<span class=\"pl-c1\">delayOnTouchOnly</span>: <span class=\"pl-c1\">false</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// only delay if user is using touch</span>\n\t<span class=\"pl-c1\">touchStartThreshold</span>: <span class=\"pl-c1\">0</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// px, how many pixels the point should move before cancelling a delayed drag event</span>\n\t<span class=\"pl-c1\">disabled</span>: <span class=\"pl-c1\">false</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Disables the sortable if set to true.</span>\n\t<span class=\"pl-c1\">store</span>: <span class=\"pl-c1\">null</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// <span class=\"pl-k\">@see</span> Store</span>\n\t<span class=\"pl-c1\">animation</span>: <span class=\"pl-c1\">150</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// ms, animation speed moving items when sorting, `0` — without animation</span>\n\t<span class=\"pl-c1\">easing</span>: <span class=\"pl-s\">\"cubic-bezier(1, 0, 0, 1)\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Easing for animation. Defaults to null. See https://easings.net/ for examples.</span>\n\t<span class=\"pl-c1\">handle</span>: <span class=\"pl-s\">\".my-handle\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Drag handle selector within list items</span>\n\t<span class=\"pl-c1\">filter</span>: <span class=\"pl-s\">\".ignore-elements\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Selectors that do not lead to dragging (String or Function)</span>\n\t<span class=\"pl-c1\">preventOnFilter</span>: <span class=\"pl-c1\">true</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Call `event.preventDefault()` when triggered `filter`</span>\n\t<span class=\"pl-c1\">draggable</span>: <span class=\"pl-s\">\".item\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Specifies which items inside the element should be draggable</span>\n\n\t<span class=\"pl-c1\">dataIdAttr</span>: <span class=\"pl-s\">'data-id'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// HTML attribute that is used by the `toArray()` method</span>\n\n\t<span class=\"pl-c1\">ghostClass</span>: <span class=\"pl-s\">\"sortable-ghost\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Class name for the drop placeholder</span>\n\t<span class=\"pl-c1\">chosenClass</span>: <span class=\"pl-s\">\"sortable-chosen\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Class name for the chosen item</span>\n\t<span class=\"pl-c1\">dragClass</span>: <span class=\"pl-s\">\"sortable-drag\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Class name for the dragging item</span>\n\n\t<span class=\"pl-c1\">swapThreshold</span>: <span class=\"pl-c1\">1</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Threshold of the swap zone</span>\n\t<span class=\"pl-c1\">invertSwap</span>: <span class=\"pl-c1\">false</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Will always use inverted swap zone if set to true</span>\n\t<span class=\"pl-c1\">invertedSwapThreshold</span>: <span class=\"pl-c1\">1</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Threshold of the inverted swap zone (will be set to swapThreshold value by default)</span>\n\t<span class=\"pl-c1\">direction</span>: <span class=\"pl-s\">'horizontal'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Direction of Sortable (will be detected automatically if not given)</span>\n\n\t<span class=\"pl-c1\">forceFallback</span>: <span class=\"pl-c1\">false</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// ignore the HTML5 DnD behaviour and force the fallback to kick in</span>\n\n\t<span class=\"pl-c1\">fallbackClass</span>: <span class=\"pl-s\">\"sortable-fallback\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Class name for the cloned DOM Element when using forceFallback</span>\n\t<span class=\"pl-c1\">fallbackOnBody</span>: <span class=\"pl-c1\">false</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Appends the cloned DOM Element into the Document's Body</span>\n\t<span class=\"pl-c1\">fallbackTolerance</span>: <span class=\"pl-c1\">0</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Specify in pixels how far the mouse should move before it's considered as a drag.</span>\n\n\t<span class=\"pl-c1\">dragoverBubble</span>: <span class=\"pl-c1\">false</span><span class=\"pl-kos\">,</span>\n\t<span class=\"pl-c1\">removeCloneOnHide</span>: <span class=\"pl-c1\">true</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// Remove the clone element when it is not showing, rather than just hiding it</span>\n\t<span class=\"pl-c1\">emptyInsertThreshold</span>: <span class=\"pl-c1\">5</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// px, distance mouse must be from empty sortable to insert drag element into it</span>\n\n\n\t<span class=\"pl-en\">setData</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-c\">/** DataTransfer */</span><span class=\"pl-s1\">dataTransfer</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">/** HTMLElement*/</span><span class=\"pl-s1\">dragEl</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-s1\">dataTransfer</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">setData</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'Text'</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">dragEl</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">textContent</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// `dataTransfer` object of HTML5 DragEvent</span>\n\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t<span class=\"pl-c\">// Element is chosen</span>\n\t<span class=\"pl-en\">onChoose</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">oldIndex</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// element index within parent</span>\n\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t<span class=\"pl-c\">// Element is unchosen</span>\n\t<span class=\"pl-en\">onUnchoose</span>: <span class=\"pl-k\">function</span><span class=\"pl-kos\">(</span><span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-c\">// same properties as onEnd</span>\n\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t<span class=\"pl-c\">// Element dragging started</span>\n\t<span class=\"pl-en\">onStart</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">oldIndex</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// element index within parent</span>\n\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t<span class=\"pl-c\">// Element dragging ended</span>\n\t<span class=\"pl-en\">onEnd</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-k\">var</span> <span class=\"pl-s1\">itemEl</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">item</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// dragged HTMLElement</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">to</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// target list</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">from</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// previous list</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">oldIndex</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// element's old index within old parent</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">newIndex</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// element's new index within new parent</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">oldDraggableIndex</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// element's old index within old parent, only counting draggable elements</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">newDraggableIndex</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// element's new index within new parent, only counting draggable elements</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">clone</span> <span class=\"pl-c\">// the clone element</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">pullMode</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// when item is in another sortable: `\"clone\"` if cloning, `true` if moving</span>\n\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t<span class=\"pl-c\">// Element is dropped into the list from another list</span>\n\t<span class=\"pl-en\">onAdd</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-c\">// same properties as onEnd</span>\n\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t<span class=\"pl-c\">// Changed sorting within list</span>\n\t<span class=\"pl-en\">onUpdate</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-c\">// same properties as onEnd</span>\n\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t<span class=\"pl-c\">// Called by any change to the list (add / update / remove)</span>\n\t<span class=\"pl-en\">onSort</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-c\">// same properties as onEnd</span>\n\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t<span class=\"pl-c\">// Element is removed from the list into another list</span>\n\t<span class=\"pl-en\">onRemove</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-c\">// same properties as onEnd</span>\n\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t<span class=\"pl-c\">// Attempt to drag a filtered element</span>\n\t<span class=\"pl-en\">onFilter</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-k\">var</span> <span class=\"pl-s1\">itemEl</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">item</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// HTMLElement receiving the `mousedown|tapstart` event.</span>\n\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t<span class=\"pl-c\">// Event when you move an item in the list or between lists</span>\n\t<span class=\"pl-en\">onMove</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">originalEvent</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-c\">// Example: https://jsbin.com/nawahef/edit?js,output</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">dragged</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// dragged HTMLElement</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">draggedRect</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// DOMRect {left, top, right, bottom}</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">related</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// HTMLElement on which have guided</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">relatedRect</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// DOMRect</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">willInsertAfter</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// Boolean that is true if Sortable will insert drag element after target by default</span>\n\t\t<span class=\"pl-s1\">originalEvent</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">clientY</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// mouse position</span>\n\t\t<span class=\"pl-c\">// return false; — for cancel</span>\n\t\t<span class=\"pl-c\">// return -1; — insert before target</span>\n\t\t<span class=\"pl-c\">// return 1; — insert after target</span>\n\t\t<span class=\"pl-c\">// return true; — keep default insertion point based on the direction</span>\n\t\t<span class=\"pl-c\">// return void; — keep default insertion point based on the direction</span>\n\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t<span class=\"pl-c\">// Called when creating a clone of element</span>\n\t<span class=\"pl-en\">onClone</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-k\">var</span> <span class=\"pl-s1\">origEl</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">item</span><span class=\"pl-kos\">;</span>\n\t\t<span class=\"pl-k\">var</span> <span class=\"pl-s1\">cloneEl</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">clone</span><span class=\"pl-kos\">;</span>\n\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t<span class=\"pl-c\">// Called when dragging element changes position</span>\n\t<span class=\"pl-en\">onChange</span>: <span class=\"pl-k\">function</span><span class=\"pl-kos\">(</span><span class=\"pl-c\">/**Event*/</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">newIndex</span> <span class=\"pl-c\">// most likely why this event is used is to get the dragging element's current index</span>\n\t\t<span class=\"pl-c\">// same properties as onEnd</span>\n\t<span class=\"pl-kos\">}</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-group-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#group-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>group</code> option</h4>\n<p dir=\"auto\">To drag elements from one list into another, both lists must have the same <code>group</code> value.\nYou can also define whether lists can give away, give and keep a copy (<code>clone</code>), and receive elements.</p>\n<ul dir=\"auto\">\n<li>name: <code>String</code> — group name</li>\n<li>pull: <code>true|false|[\"foo\", \"bar\"]|'clone'|function</code> — ability to move from the list. <code>clone</code> — copy the item, rather than move. Or an array of group names which the elements may be put in. Defaults to <code>true</code>.</li>\n<li>put: <code>true|false|[\"baz\", \"qux\"]|function</code> — whether elements can be added from other lists, or an array of group names from which elements can be added.</li>\n<li>revertClone: <code>boolean</code> — revert cloned element to initial position after moving to a another list.</li>\n</ul>\n<p dir=\"auto\">Demo:</p>\n<ul dir=\"auto\">\n<li><a href=\"https://jsbin.com/hijetos/edit?js,output\" rel=\"nofollow\">https://jsbin.com/hijetos/edit?js,output</a></li>\n<li><a href=\"https://jsbin.com/nacoyah/edit?js,output\" rel=\"nofollow\">https://jsbin.com/nacoyah/edit?js,output</a> — use of complex logic in the <code>pull</code> and<code> put</code></li>\n<li><a href=\"https://jsbin.com/bifuyab/edit?js,output\" rel=\"nofollow\">https://jsbin.com/bifuyab/edit?js,output</a> — use <code>revertClone: true</code></li>\n</ul>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sort-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sort-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>sort</code> option</h4>\n<p dir=\"auto\">Allow sorting inside list.</p>\n<p dir=\"auto\">Demo: <a href=\"https://jsbin.com/jayedig/edit?js,output\" rel=\"nofollow\">https://jsbin.com/jayedig/edit?js,output</a></p>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-delay-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#delay-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>delay</code> option</h4>\n<p dir=\"auto\">Time in milliseconds to define when the sorting should start.\nUnfortunately, due to browser restrictions, delaying is not possible on IE or Edge with native drag &amp; drop.</p>\n<p dir=\"auto\">Demo: <a href=\"https://jsbin.com/zosiwah/edit?js,output\" rel=\"nofollow\">https://jsbin.com/zosiwah/edit?js,output</a></p>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-delayontouchonly-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#delayontouchonly-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>delayOnTouchOnly</code> option</h4>\n<p dir=\"auto\">Whether or not the delay should be applied only if the user is using touch (eg. on a mobile device). No delay will be applied in any other case. Defaults to <code>false</code>.</p>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-swapthreshold-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#swapthreshold-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>swapThreshold</code> option</h4>\n<p dir=\"auto\">Percentage of the target that the swap zone will take up, as a float between <code>0</code> and <code>1</code>.</p>\n<p dir=\"auto\"><a href=\"https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#swap-threshold\">Read more</a></p>\n<p dir=\"auto\">Demo: <a href=\"http://sortablejs.github.io/Sortable#thresholds\" rel=\"nofollow\">http://sortablejs.github.io/Sortable#thresholds</a></p>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-invertswap-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#invertswap-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>invertSwap</code> option</h4>\n<p dir=\"auto\">Set to <code>true</code> to set the swap zone to the sides of the target, for the effect of sorting \"in between\" items.</p>\n<p dir=\"auto\"><a href=\"https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#forcing-inverted-swap-zone\">Read more</a></p>\n<p dir=\"auto\">Demo: <a href=\"http://sortablejs.github.io/Sortable#thresholds\" rel=\"nofollow\">http://sortablejs.github.io/Sortable#thresholds</a></p>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-invertedswapthreshold-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#invertedswapthreshold-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>invertedSwapThreshold</code> option</h4>\n<p dir=\"auto\">Percentage of the target that the inverted swap zone will take up, as a float between <code>0</code> and <code>1</code>. If not given, will default to <code>swapThreshold</code>.</p>\n<p dir=\"auto\"><a href=\"https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#dealing-with-swap-glitching\">Read more</a></p>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-direction-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#direction-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>direction</code> option</h4>\n<p dir=\"auto\">Direction that the Sortable should sort in. Can be set to <code>'vertical'</code>, <code>'horizontal'</code>, or a function, which will be called whenever a target is dragged over. Must return <code>'vertical'</code> or <code>'horizontal'</code>.</p>\n<p dir=\"auto\"><a href=\"https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#direction\">Read more</a></p>\n<p dir=\"auto\">Example of direction detection for vertical list that includes full column and half column elements:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Sortable.create(el, {\n\tdirection: function(evt, target, dragEl) {\n\t\tif (target !== null &amp;&amp; target.className.includes('half-column') &amp;&amp; dragEl.className.includes('half-column')) {\n\t\t\treturn 'horizontal';\n\t\t}\n\t\treturn 'vertical';\n\t}\n});\"><pre><span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">create</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">el</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span>\n\t<span class=\"pl-en\">direction</span>: <span class=\"pl-k\">function</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">target</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">dragEl</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-k\">if</span> <span class=\"pl-kos\">(</span><span class=\"pl-s1\">target</span> <span class=\"pl-c1\">!==</span> <span class=\"pl-c1\">null</span> <span class=\"pl-c1\">&amp;&amp;</span> <span class=\"pl-s1\">target</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">className</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">includes</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'half-column'</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">&amp;&amp;</span> <span class=\"pl-s1\">dragEl</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">className</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">includes</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'half-column'</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t\t<span class=\"pl-k\">return</span> <span class=\"pl-s\">'horizontal'</span><span class=\"pl-kos\">;</span>\n\t\t<span class=\"pl-kos\">}</span>\n\t\t<span class=\"pl-k\">return</span> <span class=\"pl-s\">'vertical'</span><span class=\"pl-kos\">;</span>\n\t<span class=\"pl-kos\">}</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-touchstartthreshold-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#touchstartthreshold-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>touchStartThreshold</code> option</h4>\n<p dir=\"auto\">This option is similar to <code>fallbackTolerance</code> option.</p>\n<p dir=\"auto\">When the <code>delay</code> option is set, some phones with very sensitive touch displays like the Samsung Galaxy S8 will fire\nunwanted touchmove events even when your finger is not moving, resulting in the sort not triggering.</p>\n<p dir=\"auto\">This option sets the minimum pointer movement that must occur before the delayed sorting is cancelled.</p>\n<p dir=\"auto\">Values between 3 to 5 are good.</p>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-disabled-options\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#disabled-options\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>disabled</code> options</h4>\n<p dir=\"auto\">Disables the sortable if set to <code>true</code>.</p>\n<p dir=\"auto\">Demo: <a href=\"https://jsbin.com/sewokud/edit?js,output\" rel=\"nofollow\">https://jsbin.com/sewokud/edit?js,output</a></p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var sortable = Sortable.create(list);\n\ndocument.getElementById(&quot;switcher&quot;).onclick = function () {\n\tvar state = sortable.option(&quot;disabled&quot;); // get\n\n\tsortable.option(&quot;disabled&quot;, !state); // set\n};\"><pre><span class=\"pl-k\">var</span> <span class=\"pl-s1\">sortable</span> <span class=\"pl-c1\">=</span> <span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">create</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">list</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-smi\">document</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">getElementById</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">\"switcher\"</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">onclick</span> <span class=\"pl-c1\">=</span> <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t<span class=\"pl-k\">var</span> <span class=\"pl-s1\">state</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">option</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">\"disabled\"</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// get</span>\n\n\t<span class=\"pl-s1\">sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">option</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">\"disabled\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">!</span><span class=\"pl-s1\">state</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// set</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">;</span></pre></div>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-handle-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#handle-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>handle</code> option</h4>\n<p dir=\"auto\">To make list items draggable, Sortable disables text selection by the user.\nThat's not always desirable. To allow text selection, define a drag handler,\nwhich is an area of every list element that allows it to be dragged around.</p>\n<p dir=\"auto\">Demo: <a href=\"https://jsbin.com/numakuh/edit?html,js,output\" rel=\"nofollow\">https://jsbin.com/numakuh/edit?html,js,output</a></p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Sortable.create(el, {\n\thandle: &quot;.my-handle&quot;\n});\"><pre><span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">create</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">el</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span>\n\t<span class=\"pl-c1\">handle</span>: <span class=\"pl-s\">\".my-handle\"</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;ul&gt;\n\t&lt;li&gt;&lt;span class=&quot;my-handle&quot;&gt;::&lt;/span&gt; list item text one\n\t&lt;li&gt;&lt;span class=&quot;my-handle&quot;&gt;::&lt;/span&gt; list item text two\n&lt;/ul&gt;\"><pre><span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">ul</span><span class=\"pl-kos\">&gt;</span>\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">span</span> <span class=\"pl-c1\">class</span>=\"<span class=\"pl-s\">my-handle</span>\"<span class=\"pl-kos\">&gt;</span>::<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">span</span><span class=\"pl-kos\">&gt;</span> list item text one\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">span</span> <span class=\"pl-c1\">class</span>=\"<span class=\"pl-s\">my-handle</span>\"<span class=\"pl-kos\">&gt;</span>::<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">span</span><span class=\"pl-kos\">&gt;</span> list item text two\n<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">ul</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<div class=\"highlight highlight-source-css notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".my-handle {\n\tcursor: move;\n\tcursor: -webkit-grabbing;\n}\"><pre>.<span class=\"pl-c1\">my-handle</span> {\n\t<span class=\"pl-c1\">cursor</span><span class=\"pl-kos\">:</span> move;\n\t<span class=\"pl-c1\">cursor</span><span class=\"pl-kos\">:</span> -webkit-grabbing;\n}</pre></div>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-filter-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#filter-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>filter</code> option</h4>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Sortable.create(list, {\n\tfilter: &quot;.js-remove, .js-edit&quot;,\n\tonFilter: function (evt) {\n\t\tvar item = evt.item,\n\t\t\tctrl = evt.target;\n\n\t\tif (Sortable.utils.is(ctrl, &quot;.js-remove&quot;)) { // Click on remove button\n\t\t\titem.parentNode.removeChild(item); // remove sortable item\n\t\t}\n\t\telse if (Sortable.utils.is(ctrl, &quot;.js-edit&quot;)) { // Click on edit link\n\t\t\t// ...\n\t\t}\n\t}\n})\"><pre><span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">create</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">list</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span>\n\t<span class=\"pl-c1\">filter</span>: <span class=\"pl-s\">\".js-remove, .js-edit\"</span><span class=\"pl-kos\">,</span>\n\t<span class=\"pl-en\">onFilter</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-s1\">evt</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-k\">var</span> <span class=\"pl-s1\">item</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">item</span><span class=\"pl-kos\">,</span>\n\t\t\t<span class=\"pl-s1\">ctrl</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">evt</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">target</span><span class=\"pl-kos\">;</span>\n\n\t\t<span class=\"pl-k\">if</span> <span class=\"pl-kos\">(</span><span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">utils</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">is</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">ctrl</span><span class=\"pl-kos\">,</span> <span class=\"pl-s\">\".js-remove\"</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span> <span class=\"pl-c\">// Click on remove button</span>\n\t\t\t<span class=\"pl-s1\">item</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">parentNode</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">removeChild</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">item</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// remove sortable item</span>\n\t\t<span class=\"pl-kos\">}</span>\n\t\t<span class=\"pl-k\">else</span> <span class=\"pl-k\">if</span> <span class=\"pl-kos\">(</span><span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">utils</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">is</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">ctrl</span><span class=\"pl-kos\">,</span> <span class=\"pl-s\">\".js-edit\"</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span> <span class=\"pl-c\">// Click on edit link</span>\n\t\t\t<span class=\"pl-c\">// ...</span>\n\t\t<span class=\"pl-kos\">}</span>\n\t<span class=\"pl-kos\">}</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span></pre></div>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-ghostclass-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#ghostclass-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>ghostClass</code> option</h4>\n<p dir=\"auto\">Class name for the drop placeholder (default <code>sortable-ghost</code>).</p>\n<p dir=\"auto\">Demo: <a href=\"https://jsbin.com/henuyiw/edit?css,js,output\" rel=\"nofollow\">https://jsbin.com/henuyiw/edit?css,js,output</a></p>\n<div class=\"highlight highlight-source-css notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".ghost {\n opacity: 0.4;\n}\"><pre>.<span class=\"pl-c1\">ghost</span> {\n <span class=\"pl-c1\">opacity</span><span class=\"pl-kos\">:</span> <span class=\"pl-c1\">0.4</span>;\n}</pre></div>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Sortable.create(list, {\n ghostClass: &quot;ghost&quot;\n});\"><pre><span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">create</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">list</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">ghostClass</span>: <span class=\"pl-s\">\"ghost\"</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-chosenclass-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#chosenclass-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>chosenClass</code> option</h4>\n<p dir=\"auto\">Class name for the chosen item (default <code>sortable-chosen</code>).</p>\n<p dir=\"auto\">Demo: <a href=\"https://jsbin.com/hoqufox/edit?css,js,output\" rel=\"nofollow\">https://jsbin.com/hoqufox/edit?css,js,output</a></p>\n<div class=\"highlight highlight-source-css notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\".chosen {\n color: #fff;\n background-color: #c00;\n}\"><pre>.<span class=\"pl-c1\">chosen</span> {\n <span class=\"pl-c1\">color</span><span class=\"pl-kos\">:</span> <span class=\"pl-pds\"><span class=\"pl-kos\">#</span>fff</span>;\n <span class=\"pl-c1\">background-color</span><span class=\"pl-kos\">:</span> <span class=\"pl-pds\"><span class=\"pl-kos\">#</span>c00</span>;\n}</pre></div>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Sortable.create(list, {\n delay: 500,\n chosenClass: &quot;chosen&quot;\n});\"><pre><span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">create</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">list</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">delay</span>: <span class=\"pl-c1\">500</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">chosenClass</span>: <span class=\"pl-s\">\"chosen\"</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-forcefallback-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#forcefallback-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>forceFallback</code> option</h4>\n<p dir=\"auto\">If set to <code>true</code>, the Fallback for non HTML5 Browser will be used, even if we are using an HTML5 Browser.\nThis gives us the possibility to test the behaviour for older Browsers even in newer Browser, or make the Drag 'n Drop feel more consistent between Desktop , Mobile and old Browsers.</p>\n<p dir=\"auto\">On top of that, the Fallback always generates a copy of that DOM Element and appends the class <code>fallbackClass</code> defined in the options. This behaviour controls the look of this 'dragged' Element.</p>\n<p dir=\"auto\">Demo: <a href=\"https://jsbin.com/sibiput/edit?html,css,js,output\" rel=\"nofollow\">https://jsbin.com/sibiput/edit?html,css,js,output</a></p>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-fallbacktolerance-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#fallbacktolerance-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>fallbackTolerance</code> option</h4>\n<p dir=\"auto\">Emulates the native drag threshold. Specify in pixels how far the mouse should move before it's considered as a drag.\nUseful if the items are also clickable like in a list of links.</p>\n<p dir=\"auto\">When the user clicks inside a sortable element, it's not uncommon for your hand to move a little between the time you press and the time you release.\nDragging only starts if you move the pointer past a certain tolerance, so that you don't accidentally start dragging every time you click.</p>\n<p dir=\"auto\">3 to 5 are probably good values.</p>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-dragoverbubble-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#dragoverbubble-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>dragoverBubble</code> option</h4>\n<p dir=\"auto\">If set to <code>true</code>, the dragover event will bubble to parent sortables. Works on both fallback and native dragover event.\nBy default, it is false, but Sortable will only stop bubbling the event once the element has been inserted into a parent Sortable, or <em>can</em> be inserted into a parent Sortable, but isn't at that specific time (due to animation, etc).</p>\n<p dir=\"auto\">Since 1.8.0, you will probably want to leave this option as false. Before 1.8.0, it may need to be <code>true</code> for nested sortables to work.</p>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-removecloneonhide-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#removecloneonhide-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>removeCloneOnHide</code> option</h4>\n<p dir=\"auto\">If set to <code>false</code>, the clone is hidden by having it's CSS <code>display</code> property set to <code>none</code>.\nBy default, this option is <code>true</code>, meaning Sortable will remove the cloned element from the DOM when it is supposed to be hidden.</p>\n<hr>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-emptyinsertthreshold-option\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#emptyinsertthreshold-option\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>emptyInsertThreshold</code> option</h4>\n<p dir=\"auto\">The distance (in pixels) the mouse must be from an empty sortable while dragging for the drag element to be inserted into that sortable. Defaults to <code>5</code>. Set to <code>0</code> to disable this feature.</p>\n<p dir=\"auto\">Demo: <a href=\"https://jsbin.com/becavoj/edit?js,output\" rel=\"nofollow\">https://jsbin.com/becavoj/edit?js,output</a></p>\n<p dir=\"auto\">An alternative to this option would be to set a padding on your list when it is empty.</p>\n<p dir=\"auto\">For example:</p>\n<div class=\"highlight highlight-source-css notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"ul:empty {\n padding-bottom: 20px;\n}\"><pre><span class=\"pl-ent\">ul</span><span class=\"pl-kos\">:</span><span class=\"pl-c1\">empty</span> {\n <span class=\"pl-c1\">padding-bottom</span><span class=\"pl-kos\">:</span> <span class=\"pl-c1\">20<span class=\"pl-smi\">px</span></span>;\n}</pre></div>\n<p dir=\"auto\">Warning: For <code>:empty</code> to work, it must have no node inside (even text one).</p>\n<p dir=\"auto\">Demo:\n<a href=\"https://jsbin.com/yunakeg/edit?html,css,js,output\" rel=\"nofollow\">https://jsbin.com/yunakeg/edit?html,css,js,output</a></p>\n<hr>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-event-object-demo\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#event-object-demo\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Event object (<a href=\"https://jsbin.com/fogujiv/edit?js,output\" rel=\"nofollow\">demo</a>)</h3>\n<ul dir=\"auto\">\n<li>to:<code>HTMLElement</code> — list, in which moved element</li>\n<li>from:<code>HTMLElement</code> — previous list</li>\n<li>item:<code>HTMLElement</code> — dragged element</li>\n<li>clone:<code>HTMLElement</code></li>\n<li>oldIndex:<code>Number|undefined</code> — old index within parent</li>\n<li>newIndex:<code>Number|undefined</code> — new index within parent</li>\n<li>oldDraggableIndex: <code>Number|undefined</code> — old index within parent, only counting draggable elements</li>\n<li>newDraggableIndex: <code>Number|undefined</code> — new index within parent, only counting draggable elements</li>\n<li>pullMode:<code>String|Boolean|undefined</code> — Pull mode if dragging into another sortable (<code>\"clone\"</code>, <code>true</code>, or <code>false</code>), otherwise undefined</li>\n</ul>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-move-event-object\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#move-event-object\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>move</code> event object</h4>\n<ul dir=\"auto\">\n<li>to:<code>HTMLElement</code></li>\n<li>from:<code>HTMLElement</code></li>\n<li>dragged:<code>HTMLElement</code></li>\n<li>draggedRect:<code>DOMRect</code></li>\n<li>related:<code>HTMLElement</code> — element on which have guided</li>\n<li>relatedRect:<code>DOMRect</code></li>\n<li>willInsertAfter:<code>Boolean</code> — <code>true</code> if will element be inserted after target (or <code>false</code> if before)</li>\n</ul>\n<hr>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-methods\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#methods\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Methods</h3>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-optionnamestring-value\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#optionnamestring-value\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>option(name:<code>String</code>[, value:<code>*</code>]):<code>*</code></h5>\n<p dir=\"auto\">Get or set the option.</p>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-closestelhtmlelement-selectorstringhtmlelementnull\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#closestelhtmlelement-selectorstringhtmlelementnull\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>closest(el:<code>HTMLElement</code>[, selector:<code>String</code>]):<code>HTMLElement|null</code></h5>\n<p dir=\"auto\">For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.</p>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-toarraystring\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#toarraystring\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>toArray():<code>String[]</code></h5>\n<p dir=\"auto\">Serializes the sortable's item <code>data-id</code>'s (<code>dataIdAttr</code> option) into an array of string.</p>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sortorderstring-useanimationboolean\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sortorderstring-useanimationboolean\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>sort(order:<code>String[]</code>, useAnimation:<code>Boolean</code>)</h5>\n<p dir=\"auto\">Sorts the elements according to the array.</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var order = sortable.toArray();\nsortable.sort(order.reverse(), true); // apply\"><pre><span class=\"pl-k\">var</span> <span class=\"pl-s1\">order</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">toArray</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-s1\">sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">sort</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">order</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">reverse</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">true</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// apply</span></pre></div>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-save\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#save\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>save()</h5>\n<p dir=\"auto\">Save the current sorting (see <a href=\"#store\">store</a>)</p>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-destroy\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#destroy\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>destroy()</h5>\n<p dir=\"auto\">Removes the sortable functionality completely.</p>\n<hr>\n<p dir=\"auto\"><a name=\"user-content-store\"></a></p>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-store\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#store\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Store</h3>\n<p dir=\"auto\">Saving and restoring of the sort.</p>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;ul&gt;\n\t&lt;li data-id=&quot;1&quot;&gt;order&lt;/li&gt;\n\t&lt;li data-id=&quot;2&quot;&gt;save&lt;/li&gt;\n\t&lt;li data-id=&quot;3&quot;&gt;restore&lt;/li&gt;\n&lt;/ul&gt;\"><pre><span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">ul</span><span class=\"pl-kos\">&gt;</span>\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span> <span class=\"pl-c1\">data-id</span>=\"<span class=\"pl-s\">1</span>\"<span class=\"pl-kos\">&gt;</span>order<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span> <span class=\"pl-c1\">data-id</span>=\"<span class=\"pl-s\">2</span>\"<span class=\"pl-kos\">&gt;</span>save<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span> <span class=\"pl-c1\">data-id</span>=\"<span class=\"pl-s\">3</span>\"<span class=\"pl-kos\">&gt;</span>restore<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>\n<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">ul</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Sortable.create(el, {\n\tgroup: &quot;localStorage-example&quot;,\n\tstore: {\n\t\t/**\n\t\t * Get the order of elements. Called once during initialization.\n\t\t * @param {Sortable} sortable\n\t\t * @returns {Array}\n\t\t */\n\t\tget: function (sortable) {\n\t\t\tvar order = localStorage.getItem(sortable.options.group.name);\n\t\t\treturn order ? order.split('|') : [];\n\t\t},\n\n\t\t/**\n\t\t * Save the order of elements. Called onEnd (when the item is dropped).\n\t\t * @param {Sortable} sortable\n\t\t */\n\t\tset: function (sortable) {\n\t\t\tvar order = sortable.toArray();\n\t\t\tlocalStorage.setItem(sortable.options.group.name, order.join('|'));\n\t\t}\n\t}\n})\"><pre><span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">create</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">el</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span>\n\t<span class=\"pl-c1\">group</span>: <span class=\"pl-s\">\"localStorage-example\"</span><span class=\"pl-kos\">,</span>\n\t<span class=\"pl-c1\">store</span>: <span class=\"pl-kos\">{</span>\n\t\t<span class=\"pl-c\">/**</span>\n<span class=\"pl-c\">\t\t * Get the order of elements. Called once during initialization.</span>\n<span class=\"pl-c\">\t\t * <span class=\"pl-k\">@param</span> {<span class=\"pl-smi\">Sortable</span>} sortable</span>\n<span class=\"pl-c\">\t\t * <span class=\"pl-k\">@returns</span> {<span class=\"pl-smi\">Array</span>}</span>\n<span class=\"pl-c\">\t\t */</span>\n\t\t<span class=\"pl-en\">get</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-s1\">sortable</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t\t<span class=\"pl-k\">var</span> <span class=\"pl-s1\">order</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">localStorage</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">getItem</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">options</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">group</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">name</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n\t\t\t<span class=\"pl-k\">return</span> <span class=\"pl-s1\">order</span> ? <span class=\"pl-s1\">order</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">split</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'|'</span><span class=\"pl-kos\">)</span> : <span class=\"pl-kos\">[</span><span class=\"pl-kos\">]</span><span class=\"pl-kos\">;</span>\n\t\t<span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n\n\t\t<span class=\"pl-c\">/**</span>\n<span class=\"pl-c\">\t\t * Save the order of elements. Called onEnd (when the item is dropped).</span>\n<span class=\"pl-c\">\t\t * <span class=\"pl-k\">@param</span> {<span class=\"pl-smi\">Sortable</span>} sortable</span>\n<span class=\"pl-c\">\t\t */</span>\n\t\t<span class=\"pl-en\">set</span>: <span class=\"pl-k\">function</span> <span class=\"pl-kos\">(</span><span class=\"pl-s1\">sortable</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n\t\t\t<span class=\"pl-k\">var</span> <span class=\"pl-s1\">order</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">toArray</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n\t\t\t<span class=\"pl-s1\">localStorage</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">setItem</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">options</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">group</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">name</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">order</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">join</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'|'</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n\t\t<span class=\"pl-kos\">}</span>\n\t<span class=\"pl-kos\">}</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span></pre></div>\n<hr>\n<p dir=\"auto\"><a name=\"user-content-bs\"></a></p>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-bootstrap\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#bootstrap\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Bootstrap</h3>\n<p dir=\"auto\">Demo: <a href=\"https://jsbin.com/visimub/edit?html,js,output\" rel=\"nofollow\">https://jsbin.com/visimub/edit?html,js,output</a></p>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;!-- Latest compiled and minified CSS --&gt;\n&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css&quot;/&gt;\n\n\n&lt;!-- Latest Sortable --&gt;\n&lt;script src=&quot;http://SortableJS.github.io/Sortable/Sortable.js&quot;&gt;&lt;/script&gt;\n\n\n&lt;!-- Simple List --&gt;\n&lt;ul id=&quot;simpleList&quot; class=&quot;list-group&quot;&gt;\n\t&lt;li class=&quot;list-group-item&quot;&gt;This is &lt;a href=&quot;http://SortableJS.github.io/Sortable/&quot;&gt;Sortable&lt;/a&gt;&lt;/li&gt;\n\t&lt;li class=&quot;list-group-item&quot;&gt;It works with Bootstrap...&lt;/li&gt;\n\t&lt;li class=&quot;list-group-item&quot;&gt;...out of the box.&lt;/li&gt;\n\t&lt;li class=&quot;list-group-item&quot;&gt;It has support for touch devices.&lt;/li&gt;\n\t&lt;li class=&quot;list-group-item&quot;&gt;Just drag some elements around.&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;script&gt;\n // Simple list\n Sortable.create(simpleList, { /* options */ });\n&lt;/script&gt;\"><pre><span class=\"pl-c\">&lt;!-- Latest compiled and minified CSS --&gt;</span>\n<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">link</span> <span class=\"pl-c1\">rel</span>=\"<span class=\"pl-s\">stylesheet</span>\" <span class=\"pl-c1\">href</span>=\"<span class=\"pl-s\">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css</span>\"/&gt;\n\n\n<span class=\"pl-c\">&lt;!-- Latest Sortable --&gt;</span>\n<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">script</span> <span class=\"pl-c1\">src</span>=\"<span class=\"pl-s\">http://SortableJS.github.io/Sortable/Sortable.js</span>\"<span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">script</span><span class=\"pl-kos\">&gt;</span>\n\n\n<span class=\"pl-c\">&lt;!-- Simple List --&gt;</span>\n<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">ul</span> <span class=\"pl-c1\">id</span>=\"<span class=\"pl-s\">simpleList</span>\" <span class=\"pl-c1\">class</span>=\"<span class=\"pl-s\">list-group</span>\"<span class=\"pl-kos\">&gt;</span>\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span> <span class=\"pl-c1\">class</span>=\"<span class=\"pl-s\">list-group-item</span>\"<span class=\"pl-kos\">&gt;</span>This is <span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">a</span> <span class=\"pl-c1\">href</span>=\"<span class=\"pl-s\">http://SortableJS.github.io/Sortable/</span>\"<span class=\"pl-kos\">&gt;</span>Sortable<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">a</span><span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span> <span class=\"pl-c1\">class</span>=\"<span class=\"pl-s\">list-group-item</span>\"<span class=\"pl-kos\">&gt;</span>It works with Bootstrap...<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span> <span class=\"pl-c1\">class</span>=\"<span class=\"pl-s\">list-group-item</span>\"<span class=\"pl-kos\">&gt;</span>...out of the box.<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span> <span class=\"pl-c1\">class</span>=\"<span class=\"pl-s\">list-group-item</span>\"<span class=\"pl-kos\">&gt;</span>It has support for touch devices.<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>\n\t<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">li</span> <span class=\"pl-c1\">class</span>=\"<span class=\"pl-s\">list-group-item</span>\"<span class=\"pl-kos\">&gt;</span>Just drag some elements around.<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">li</span><span class=\"pl-kos\">&gt;</span>\n<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">ul</span><span class=\"pl-kos\">&gt;</span>\n\n<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">script</span><span class=\"pl-kos\">&gt;</span>\n <span class=\"pl-c\">// Simple list</span>\n <span class=\"pl-v\">Sortable</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">create</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">simpleList</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">{</span> <span class=\"pl-c\">/* options */</span> <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">script</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<hr>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-static-methods--properties\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#static-methods--properties\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Static methods &amp; properties</h3>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sortablecreateelhtmlelement-optionsobjectsortable\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sortablecreateelhtmlelement-optionsobjectsortable\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Sortable.create(el:<code>HTMLElement</code>[, options:<code>Object</code>]):<code>Sortable</code></h5>\n<p dir=\"auto\">Create new instance.</p>\n<hr>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sortableactivesortable\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sortableactivesortable\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Sortable.active:<code>Sortable</code></h5>\n<p dir=\"auto\">The active Sortable instance.</p>\n<hr>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sortabledraggedhtmlelement\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sortabledraggedhtmlelement\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Sortable.dragged:<code>HTMLElement</code></h5>\n<p dir=\"auto\">The element being dragged.</p>\n<hr>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sortableghosthtmlelement\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sortableghosthtmlelement\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Sortable.ghost:<code>HTMLElement</code></h5>\n<p dir=\"auto\">The ghost element.</p>\n<hr>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sortableclonehtmlelement\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sortableclonehtmlelement\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Sortable.clone:<code>HTMLElement</code></h5>\n<p dir=\"auto\">The clone element.</p>\n<hr>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sortablegetelementhtmlelementsortable\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sortablegetelementhtmlelementsortable\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Sortable.get(element:<code>HTMLElement</code>):<code>Sortable</code></h5>\n<p dir=\"auto\">Get the Sortable instance on an element.</p>\n<hr>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sortablemountpluginsortablepluginsortableplugin\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sortablemountpluginsortablepluginsortableplugin\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Sortable.mount(plugin:<code>...SortablePlugin|SortablePlugin[]</code>)</h5>\n<p dir=\"auto\">Mounts a plugin to Sortable.</p>\n<hr>\n<h5 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sortableutils\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sortableutils\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Sortable.utils</h5>\n<ul dir=\"auto\">\n<li>on(el<code>:HTMLElement</code>, event<code>:String</code>, fn<code>:Function</code>) — attach an event handler function</li>\n<li>off(el<code>:HTMLElement</code>, event<code>:String</code>, fn<code>:Function</code>) — remove an event handler</li>\n<li>css(el<code>:HTMLElement</code>)<code>:Object</code> — get the values of all the CSS properties</li>\n<li>css(el<code>:HTMLElement</code>, prop<code>:String</code>)<code>:Mixed</code> — get the value of style properties</li>\n<li>css(el<code>:HTMLElement</code>, prop<code>:String</code>, value<code>:String</code>) — set one CSS properties</li>\n<li>css(el<code>:HTMLElement</code>, props<code>:Object</code>) — set more CSS properties</li>\n<li>find(ctx<code>:HTMLElement</code>, tagName<code>:String</code>[, iterator<code>:Function</code>])<code>:Array</code> — get elements by tag name</li>\n<li>bind(ctx<code>:Mixed</code>, fn<code>:Function</code>)<code>:Function</code> — Takes a function and returns a new one that will always have a particular context</li>\n<li>is(el<code>:HTMLElement</code>, selector<code>:String</code>)<code>:Boolean</code> — check the current matched set of elements against a selector</li>\n<li>closest(el<code>:HTMLElement</code>, selector<code>:String</code>[, ctx<code>:HTMLElement</code>])<code>:HTMLElement|Null</code> — for each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree</li>\n<li>clone(el<code>:HTMLElement</code>)<code>:HTMLElement</code> — create a deep copy of the set of matched elements</li>\n<li>toggleClass(el<code>:HTMLElement</code>, name<code>:String</code>, state<code>:Boolean</code>) — add or remove one classes from each element</li>\n<li>detectDirection(el<code>:HTMLElement</code>)<code>:String</code> — automatically detect the <a href=\"https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#direction\">direction</a> of the element as either <code>'vertical'</code> or <code>'horizontal'</code></li>\n</ul>\n<hr>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-plugins\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#plugins\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Plugins</h3>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-extra-plugins-included-in-complete-versions\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#extra-plugins-included-in-complete-versions\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Extra Plugins (included in complete versions)</h4>\n<ul dir=\"auto\">\n<li><a href=\"https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag\">MultiDrag</a></li>\n<li><a href=\"https://github.com/SortableJS/Sortable/tree/master/plugins/Swap\">Swap</a></li>\n</ul>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-default-plugins-included-in-default-versions\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#default-plugins-included-in-default-versions\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Default Plugins (included in default versions)</h4>\n<ul dir=\"auto\">\n<li><a href=\"https://github.com/SortableJS/Sortable/tree/master/plugins/AutoScroll\">AutoScroll</a></li>\n<li><a href=\"https://github.com/SortableJS/Sortable/tree/master/plugins/OnSpill\">OnSpill</a></li>\n</ul>\n<hr>\n<p dir=\"auto\"><a name=\"user-content-cdn\"></a></p>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-cdn\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#cdn\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>CDN</h3>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) --&gt;\n&lt;script src=&quot;https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js&quot;&gt;&lt;/script&gt;\"><pre><span class=\"pl-c\">&lt;!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) --&gt;</span>\n<span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">script</span> <span class=\"pl-c1\">src</span>=\"<span class=\"pl-s\">https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js</span>\"<span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">script</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<hr>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-contributing-issuepr\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#contributing-issuepr\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Contributing (Issue/PR)</h3>\n<p dir=\"auto\">Please, <a href=\"/SortableJS/Sortable/blob/master/CONTRIBUTING.md\">read this</a>.</p>\n<hr>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-contributors\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#contributors\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Contributors</h2>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-code-contributors\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#code-contributors\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Code Contributors</h3>\n<p dir=\"auto\">This project exists thanks to all the people who contribute. [<a href=\"/SortableJS/Sortable/blob/master/CONTRIBUTING.md\">Contribute</a>].\n<a href=\"https://github.com/SortableJS/Sortable/graphs/contributors\"><img src=\"https://camo.githubusercontent.com/941009e22ea536a73529895a72954ecbf57e0409db91dfdd0a42d737c51b8a8c/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f636f6e7472696275746f72732e7376673f77696474683d38393026627574746f6e3d66616c7365\" data-canonical-src=\"https://opencollective.com/Sortable/contributors.svg?width=890&amp;button=false\" style=\"max-width: 100%;\"></a></p>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-financial-contributors\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#financial-contributors\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Financial Contributors</h3>\n<p dir=\"auto\">Become a financial contributor and help us sustain our community. [<a href=\"https://opencollective.com/Sortable/contribute\" rel=\"nofollow\">Contribute</a>]</p>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-individuals\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#individuals\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Individuals</h4>\n<p dir=\"auto\"><a href=\"https://opencollective.com/Sortable\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/3489ab2a88d1161173379c13a1bda9c25075278a9fda979a8ff9614eecf95a8e/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f696e646976696475616c732e7376673f77696474683d383930\" data-canonical-src=\"https://opencollective.com/Sortable/individuals.svg?width=890\" style=\"max-width: 100%;\"></a></p>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-organizations\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#organizations\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Organizations</h4>\n<p dir=\"auto\">Support this project with your organization. Your logo will show up here with a link to your website. [<a href=\"https://opencollective.com/Sortable/contribute\" rel=\"nofollow\">Contribute</a>]</p>\n<p dir=\"auto\"><a href=\"https://opencollective.com/Sortable/organization/0/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/18d123580dfc728ae922ad827200b3d4bf776eae7ea3d2aba0ca130069493e01/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f6f7267616e697a6174696f6e2f302f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/Sortable/organization/0/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/Sortable/organization/1/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/ca46de643077af34dfa0d3db994e4716514a255707aed1ecf94f474b9da1cb23/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f6f7267616e697a6174696f6e2f312f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/Sortable/organization/1/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/Sortable/organization/2/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/cb8a7a4b4b04a5ef88311e0c0d3aa8c6c54d65a1677b62e2baff2bbea5c7602b/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f6f7267616e697a6174696f6e2f322f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/Sortable/organization/2/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/Sortable/organization/3/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/defbbe77836069476bca789cc532396e68aefeb175629ab2544efba0b928b5a4/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f6f7267616e697a6174696f6e2f332f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/Sortable/organization/3/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/Sortable/organization/4/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/75267749c76cefc2d8c7e2a169f35f37a34bba709e7ec5cd7104f7259097a907/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f6f7267616e697a6174696f6e2f342f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/Sortable/organization/4/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/Sortable/organization/5/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/cb5dbd17387d08b574eb7a3ccae90d07a18ac3ae5b5740631709b76d7b593e17/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f6f7267616e697a6174696f6e2f352f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/Sortable/organization/5/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/Sortable/organization/6/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/c13b3d4b8005cd0840be7944fbf7cdf0f6bfa349606924066db9844166f68504/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f6f7267616e697a6174696f6e2f362f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/Sortable/organization/6/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/Sortable/organization/7/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/52b18904468a6adc133d118f461f69be7d6eba331de0118648ebeaada70cad9c/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f6f7267616e697a6174696f6e2f372f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/Sortable/organization/7/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/Sortable/organization/8/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/f2725fa437070f681378debc4373ecf1d905928f05af7acaa98add7abba421fb/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f6f7267616e697a6174696f6e2f382f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/Sortable/organization/8/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/Sortable/organization/9/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/748f0d80286232af784fb969f23d7400c88e47111c093ed7d1c92723b14617db/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f536f727461626c652f6f7267616e697a6174696f6e2f392f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/Sortable/organization/9/avatar.svg\" style=\"max-width: 100%;\"></a></p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-mit-license\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#mit-license\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>MIT LICENSE</h2>\n<p dir=\"auto\">Permission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:</p>\n<p dir=\"auto\">The above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.</p>\n<p dir=\"auto\">THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>\n</article>",
"loaded": true,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": [
{
"level": 1,
"text": "Sortable   ",
"anchor": "sortable------",
"htmlText": "Sortable   "
},
{
"level": 2,
"text": "Features",
"anchor": "features",
"htmlText": "Features"
},
{
"level": 3,
"text": "Articles",
"anchor": "articles",
"htmlText": "Articles"
},
{
"level": 3,
"text": "Getting Started",
"anchor": "getting-started",
"htmlText": "Getting Started"
},
{
"level": 3,
"text": "Usage",
"anchor": "usage",
"htmlText": "Usage"
},
{
"level": 3,
"text": "Options",
"anchor": "options",
"htmlText": "Options"
},
{
"level": 4,
"text": "group option",
"anchor": "group-option",
"htmlText": "group option"
},
{
"level": 4,
"text": "sort option",
"anchor": "sort-option",
"htmlText": "sort option"
},
{
"level": 4,
"text": "delay option",
"anchor": "delay-option",
"htmlText": "delay option"
},
{
"level": 4,
"text": "delayOnTouchOnly option",
"anchor": "delayontouchonly-option",
"htmlText": "delayOnTouchOnly option"
},
{
"level": 4,
"text": "swapThreshold option",
"anchor": "swapthreshold-option",
"htmlText": "swapThreshold option"
},
{
"level": 4,
"text": "invertSwap option",
"anchor": "invertswap-option",
"htmlText": "invertSwap option"
},
{
"level": 4,
"text": "invertedSwapThreshold option",
"anchor": "invertedswapthreshold-option",
"htmlText": "invertedSwapThreshold option"
},
{
"level": 4,
"text": "direction option",
"anchor": "direction-option",
"htmlText": "direction option"
},
{
"level": 4,
"text": "touchStartThreshold option",
"anchor": "touchstartthreshold-option",
"htmlText": "touchStartThreshold option"
},
{
"level": 4,
"text": "disabled options",
"anchor": "disabled-options",
"htmlText": "disabled options"
},
{
"level": 4,
"text": "handle option",
"anchor": "handle-option",
"htmlText": "handle option"
},
{
"level": 4,
"text": "filter option",
"anchor": "filter-option",
"htmlText": "filter option"
},
{
"level": 4,
"text": "ghostClass option",
"anchor": "ghostclass-option",
"htmlText": "ghostClass option"
},
{
"level": 4,
"text": "chosenClass option",
"anchor": "chosenclass-option",
"htmlText": "chosenClass option"
},
{
"level": 4,
"text": "forceFallback option",
"anchor": "forcefallback-option",
"htmlText": "forceFallback option"
},
{
"level": 4,
"text": "fallbackTolerance option",
"anchor": "fallbacktolerance-option",
"htmlText": "fallbackTolerance option"
},
{
"level": 4,
"text": "dragoverBubble option",
"anchor": "dragoverbubble-option",
"htmlText": "dragoverBubble option"
},
{
"level": 4,
"text": "removeCloneOnHide option",
"anchor": "removecloneonhide-option",
"htmlText": "removeCloneOnHide option"
},
{
"level": 4,
"text": "emptyInsertThreshold option",
"anchor": "emptyinsertthreshold-option",
"htmlText": "emptyInsertThreshold option"
},
{
"level": 3,
"text": "Event object (demo)",
"anchor": "event-object-demo",
"htmlText": "Event object (demo)"
},
{
"level": 4,
"text": "move event object",
"anchor": "move-event-object",
"htmlText": "move event object"
},
{
"level": 3,
"text": "Methods",
"anchor": "methods",
"htmlText": "Methods"
},
{
"level": 5,
"text": "option(name:String[, value:*]):*",
"anchor": "optionnamestring-value",
"htmlText": "option(name:String[, value:*]):*"
},
{
"level": 5,
"text": "closest(el:HTMLElement[, selector:String]):HTMLElement|null",
"anchor": "closestelhtmlelement-selectorstringhtmlelementnull",
"htmlText": "closest(el:HTMLElement[, selector:String]):HTMLElement|null"
},
{
"level": 5,
"text": "toArray():String[]",
"anchor": "toarraystring",
"htmlText": "toArray():String[]"
},
{
"level": 5,
"text": "sort(order:String[], useAnimation:Boolean)",
"anchor": "sortorderstring-useanimationboolean",
"htmlText": "sort(order:String[], useAnimation:Boolean)"
},
{
"level": 5,
"text": "save()",
"anchor": "save",
"htmlText": "save()"
},
{
"level": 5,
"text": "destroy()",
"anchor": "destroy",
"htmlText": "destroy()"
},
{
"level": 3,
"text": "Store",
"anchor": "store",
"htmlText": "Store"
},
{
"level": 3,
"text": "Bootstrap",
"anchor": "bootstrap",
"htmlText": "Bootstrap"
},
{
"level": 3,
"text": "Static methods & properties",
"anchor": "static-methods--properties",
"htmlText": "Static methods &amp; properties"
},
{
"level": 5,
"text": "Sortable.create(el:HTMLElement[, options:Object]):Sortable",
"anchor": "sortablecreateelhtmlelement-optionsobjectsortable",
"htmlText": "Sortable.create(el:HTMLElement[, options:Object]):Sortable"
},
{
"level": 5,
"text": "Sortable.active:Sortable",
"anchor": "sortableactivesortable",
"htmlText": "Sortable.active:Sortable"
},
{
"level": 5,
"text": "Sortable.dragged:HTMLElement",
"anchor": "sortabledraggedhtmlelement",
"htmlText": "Sortable.dragged:HTMLElement"
},
{
"level": 5,
"text": "Sortable.ghost:HTMLElement",
"anchor": "sortableghosthtmlelement",
"htmlText": "Sortable.ghost:HTMLElement"
},
{
"level": 5,
"text": "Sortable.clone:HTMLElement",
"anchor": "sortableclonehtmlelement",
"htmlText": "Sortable.clone:HTMLElement"
},
{
"level": 5,
"text": "Sortable.get(element:HTMLElement):Sortable",
"anchor": "sortablegetelementhtmlelementsortable",
"htmlText": "Sortable.get(element:HTMLElement):Sortable"
},
{
"level": 5,
"text": "Sortable.mount(plugin:...SortablePlugin|SortablePlugin[])",
"anchor": "sortablemountpluginsortablepluginsortableplugin",
"htmlText": "Sortable.mount(plugin:...SortablePlugin|SortablePlugin[])"
},
{
"level": 5,
"text": "Sortable.utils",
"anchor": "sortableutils",
"htmlText": "Sortable.utils"
},
{
"level": 3,
"text": "Plugins",
"anchor": "plugins",
"htmlText": "Plugins"
},
{
"level": 4,
"text": "Extra Plugins (included in complete versions)",
"anchor": "extra-plugins-included-in-complete-versions",
"htmlText": "Extra Plugins (included in complete versions)"
},
{
"level": 4,
"text": "Default Plugins (included in default versions)",
"anchor": "default-plugins-included-in-default-versions",
"htmlText": "Default Plugins (included in default versions)"
},
{
"level": 3,
"text": "CDN",
"anchor": "cdn",
"htmlText": "CDN"
},
{
"level": 3,
"text": "Contributing (Issue/PR)",
"anchor": "contributing-issuepr",
"htmlText": "Contributing (Issue/PR)"
},
{
"level": 2,
"text": "Contributors",
"anchor": "contributors",
"htmlText": "Contributors"
},
{
"level": 3,
"text": "Code Contributors",
"anchor": "code-contributors",
"htmlText": "Code Contributors"
},
{
"level": 3,
"text": "Financial Contributors",
"anchor": "financial-contributors",
"htmlText": "Financial Contributors"
},
{
"level": 4,
"text": "Individuals",
"anchor": "individuals",
"htmlText": "Individuals"
},
{
"level": 4,
"text": "Organizations",
"anchor": "organizations",
"htmlText": "Organizations"
},
{
"level": 2,
"text": "MIT LICENSE",
"anchor": "mit-license",
"htmlText": "MIT LICENSE"
}
],
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2FSortableJS%2FSortable"
}
},
{
"displayName": "LICENSE",
"repoName": "Sortable",
"refName": "master",
"path": "LICENSE",
"preferredFileType": "license",
"tabName": "MIT",
"richText": null,
"loaded": false,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": null,
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2FSortableJS%2FSortable"
}
}
],
"overviewFilesProcessingTime": 24.265672
}
},
"appPayload": {
"helpUrl": "https://docs.github.com",
"findFileWorkerPath": "/assets-cdn/worker/find-file-worker-32bb159cc57c.js",
"findInFileWorkerPath": "/assets-cdn/worker/find-in-file-worker-c6704d501c10.js",
"githubDevUrl": null,
"enabled_features": {
"code_nav_ui_events": false,
"copilot_conversational_ux": false,
"copilot_conversational_ux_embedding_update": false,
"copilot_popover_file_editor_header": false,
"copilot_smell_icebreaker_ux": true,
"copilot_workspace": false,
"codeview_firefox_inert": true
}
}
}
}
{
"accept-ranges": "bytes",
"cache-control": "max-age=0, private, must-revalidate",
"content-encoding": "gzip",
"content-security-policy": "default-src 'none'; base-uri 'self'; child-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com api.githubcopilot.com objects-origin.githubusercontent.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/",
"content-type": "text/html; charset=utf-8",
"date": "Mon, 26 Feb 2024 11:37:47 GMT",
"etag": "51554632659125df466fc3e2a58c3179",
"referrer-policy": "no-referrer-when-downgrade",
"server": "GitHub.com",
"set-cookie": "logged_in=no; Path=/; Domain=github.com; Expires=Wed, 26 Feb 2025 11:37:47 GMT; HttpOnly; Secure; SameSite=Lax",
"strict-transport-security": "max-age=31536000; includeSubdomains; preload",
"transfer-encoding": "chunked",
"vary": "X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, Accept-Encoding, Accept, X-Requested-With",
"x-content-type-options": "nosniff",
"x-frame-options": "deny",
"x-github-request-id": "8FA4:9F97:1C85C62:289400B:65DC780B",
"x-xss-protection": "0"
}