Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。
Sortable.js可以实现同组内上下拖动元素，也可以实现不同组内互相拖动元素。
一、安装
npm i sortablejs -S二、sortablejs 最基本的示例
<div id="itxst">
<div data-id="a">item 1</div>
<div data-id="b">item 2</div>
<div data-id="c">item 3</div>
</div>var el = document.getElementById('itxst');
//设置配置
var ops = {
animation: 200,
group: "name",
//拖动结束
onEnd: function (evt) {
//获取拖动后的排序
var arr = sortable.toArray();
// arr数组里的值是 data-id 的顺序
console.log({evt, arr})
},
};
//初始化
var sortable = Sortable.create(el, ops);三、常用配置
const config = {
//一个网页存在多个分组时设置，组名相同的组之间元素可以相互拖拽
group: "name",
//2种group写法选一种就可以了
group: {
name: 'name',
pull: 'clone', //克隆元素
},
//是否允许元素内部排序，如果为false当有多个排序组时,多个组之间可以拖拽，本身不能拖拽（默认true）
sort: true,
//是否禁用拖拽和排序
disabled: false,
//动画效果持续时间（不设置或0都没有过渡效果）
animation: 150,
//点击指定class类的元素才能拖拽（比如点击元素内的图标才能拖拽元素，可以给图标设置my-handle class）
//class可以定义在元素本身上，也可以定义在子元素上
handle: ".my-handle",
// class为ignore的元素不能拖动
filter: ".ignore",
//含有item 类的元素可以被拖拽（class只能定义在元素本身上）
draggable: ".item",
//指定获取拖动后排序的属性
dataIdAttr: 'data-id',
//给停靠位置添加的class（可以给这个class定义样式）
ghostClass: "ghost",
//选中元素添加的类（包括悬浮的元素和停靠位置的元素）
chosenClass: "chosen",
//拖拽对象移动时添加的类
dragClass: "drag",
//禁用html5原生拖拽
forceFallback: false,
...
//克隆事件
onClone: function (evt) {
//被克隆的对象（被移到另外地方的那个元素）
var origEl = evt.item;
//克隆后的对象（还是在原来位置的元素）
var cloneEl = evt.clone;
cloneEl.innerHTML = "clone出的元素";
},
...
}