npm install sortablejs --save

bower install --save sortablejs

// 默认 SortableJS
import Sortable from 'sortablejs';

// 核心 SortableJS（不含默认插件）
import Sortable from 'sortablejs/modular/sortable.core.esm.js';

// 完整 SortableJS（包含所有插件）
import Sortable from 'sortablejs/modular/sortable.complete.esm.js';

// Cherrypick 额外插件
import Sortable, { MultiDrag, Swap } from 'sortablejs';

Sortable.mount(new MultiDrag(), new Swap());

// Cherrypick 默认插件
import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';

Sortable.mount(new AutoScroll());

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

var sortable = new Sortable(el, {
        group: "name", // 或 { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
        sort: true, // 在列表内排序
        delay: 0, // 定义排序开始时间（毫秒）
        delayOnTouchOnly: false, // 仅在用户触摸时延迟
        touchStartThreshold: 0, // 像素，在取消延迟拖动事件之前，点应移动的像素数
        disabled: false, // 如果设置为 true，则禁用可排序对象。
        store: null, // @see Store
        animation: 150, // 毫秒，排序时移动项目的动画速度，`0` — 不使用动画
        easing: "cubic-bezier(1, 0, 0, 1)", // 动画的缓动。默认为 null。示例请参阅 https://easings.net/。
        handle: ".my-handle", // 列表项内的拖动手柄选择器
        filter: ".ignore-elements", // 不会导致拖动的选择器（字符串或函数）
        preventOnFilter: true, // 触发 `filter` 时调用 `event.preventDefault()`
        draggable: ".item", // 指定元素内哪些项目应可拖动
        
        dataIdAttr: 'data-id', // `toArray()` 方法使用的 HTML 属性
        
        ghostClass: "sortable-ghost", // 放置占位符的 Class 名称
        chosenClass: "sortable-chosen", // 所选项目的 Class 名称
        dragClass: "sortable-drag", // 拖动项目的 Class 名称
        
        swapThreshold: 1, // 交换区域的阈值
        invertSwap: false, // 如果设置为 true，则始终使用反向交换区域
        invertedSwapThreshold: 1, // 反向交换区域的阈值（将设置为（默认为 swapThreshold 值）
        direction: 'horizo​​ntal', // Sortable 的方向（如果未指定，将自动检测）
        
        forceFallback: false, // 忽略 HTML5 DnD 行为并强制启用 fallback
        
        fallbackClass: "sortable-fallback", // 使用 forceFallback 时克隆的 DOM 元素的 Class 名
        fallbackOnBody: false, // 将克隆的 DOM 元素附加到 Document 的 Body 中
        fallbackTolerance: 0, // 指定鼠标在被视为拖动之前应移动的距离（以像素为单位）。
        
        dragoverBubble: false,
        removeCloneOnHide: true, // 当克隆元素未显示时，将其移除，而不是隐藏它
        emptyInsertThreshold: 5, // 鼠标与空的 sortable 之间的距离，以便将拖动元素插入其中


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

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

var sortable = Sortable.create(list);

document.getElementById("switcher").onclick = function () {
  var state = sortable.option("disabled"); // 获取
  
  sortable.option("disabled", !state); // 设置
};

Sortable.create(el, {
handle: ".my-handle"
});

<ul>
<li><span class="my-handle">::</span> 列表项文本一
<li><span class="my-handle">::</span> 列表项文本二
</ul>

.my-handle {
cursor: move;
cursor: -webkit-grabbing;
}

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

.ghost {
  opacity: 0.4;
}

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

.chosen {
  color: #fff;
  background-color: #c00;
}

Sortable.create(list, {
  delay: 500,
  chosenClass: "chosen"
});

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

var order = sortable.toArray();
sortable.sort(order.reverse(), true); // 应用

<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('|'));
		}
	}
})

<!-- 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>

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