SortableJS 对列表通过拖放 (drag-and-drop) 进行拖拽排序。它还提供了 Vue.Draggable 等比较成熟的包装组件。

https://github.com/SortableJS/Sortable

npm install sortablejs --S

可对任意父元素的子元素可拖动，如对表格的 tbody 元素，使其内部的 tr 可被拖动：

const tbody = document.querySelector('tbody')
new Sortable(example1, {});

通过 forceFallback: false 解除浏览器默认行为，即可成为受控组件，使用 v-model，否则浏览器默认行为总是有一种控制不住的感觉。

可通过 scrollSensitivity 调整滑动灵敏度，比如元素跨滚动条拖拽时总感觉拖不动，调高即可轻松拖拽。这个属性就是鼠标靠近边缘多远开始滚动，默认30。

内部的元素点击不了，点击和拖拽容易产生误判，此时要作用点击事件的子元素可以 event.stopPropagation() 来阻止冒泡，而实际被拖拽的子元素使用 handle 属性来设置 css 类，避免冲突。

通过 ghostClass 设置被拖拽后显示预览位置的的样式， dragClass 设置拖拽中样式。

拖拽的动画效果，可参照官方示例的动画效果。