sortablejs中文文档，vue项目中拖拽排序，element-ui中table拖拽排序

 一使用npm装包

npm install sortablejs --save

二再项目中使用

import Sortable from 'sortablejs';

<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,{options});

 三 完整配置

var sortable = new Sortable(el, {
	group: "name",  // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
	sort: true,  // 列表内部排序
	delay: 0, // 定义排序开始时间的时间（毫秒）
	delayOnTouchOnly: false, // 仅当用户使用触摸时延迟
	touchStartThreshold: 0, // px，在取消延迟拖动事件之前，该点应移动多少像素
	disabled: false, // 如果设置为true，则禁用可排序
	store: null,  // @see Store
	animation: 150,  // ms，动画速度排序时移动项目，`0`-无动画
	easing: "cubic-bezier(1, 0, 0, 1)", // 动画的缓和。默认为null。看见https://easings.net/例如。
	handle: ".my-handle",  // 在列表项中拖动句柄选择器
	filter: ".ignore-elements",  // 不会导致拖动的选择器（字符串或函数）
	preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
	draggable: ".item",  // 指定元素中应可拖动的项目

	dataIdAttr: 'data-id', //toArray（）`方法使用的HTML属性

	ghostClass: "sortable-ghost",  // 放置占位符的类名
	chosenClass: "sortable-chosen",  // 所选项目的类名
	dragClass: "sortable-drag",  // 拖动项的类名

	swapThreshold: 1, // 交换区阈值
	invertSwap: false, // 如果设置为true，将始终使用反向交换区域
	invertedSwapThreshold: 1, // 反向交换区的阈值（默认情况下将设置为swapThreshold值）
	direction: 'horizontal', // 可排序方向（如果未给出，将自动检测）

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

	fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆的DOM元素的类名
	fallbackOnBody: false,  // 将克隆的DOM元素附加到文档的正文中
	fallbackTolerance: 0, // 以像素为单位指定鼠标在被视为拖动之前应移动的距离。

	dragoverBubble: false,
	removeCloneOnHide: true, //在克隆元素未显示时将其删除，而不是将其隐藏
	emptyInsertThreshold: 5, // px，距离鼠标必须从空可排序位置开始，才能将拖动元素插入其中


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

	// 已选择元素
	onChoose: function (/**Event*/evt) {
		evt.oldIndex;  // element index within parent
	},

	// 元素未关闭
	onUnchoose: function(/**Event*/evt) {
		// same properties as onEnd
	},

	// 元素拖动已开始
	onStart: function (/**Event*/evt) {
		evt.oldIndex;  // element index within parent
	},

	// 元素拖动结束
	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
	},

	// 元素从另一个列表中拖放到列表中
	onAdd: function (/**Event*/evt) {
		// 与onEnd相同的属性
	},

	// 更改了列表内的排序
	onUpdate: function (/**Event*/evt) {
		//与onEnd相同的属性
	},

	// 由列表的任何更改调用（添加/更新/删除）
	onSort: function (/**Event*/evt) {
		// 与onEnd相同的属性
	},

	// 元素从列表中删除到另一个列表中
	onRemove: function (/**Event*/evt) {
		// 与onEnd相同的属性
	},

	// 尝试拖动筛选的元素
	onFilter: function (/**Event*/evt) {
		var itemEl = evt.item;  //HTMLElement接收“mousedown”、“tapstart”事件。
	},

	// 在列表中或列表之间移动项目时发生的事件
	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
	},

	// 创建元素克隆时调用
	onClone: function (/**Event*/evt) {
		var origEl = evt.item;
		var cloneEl = evt.clone;
	},

	// 拖动元素更改位置时调用
	onChange: function(/**Event*/evt) {
		evt.newIndex //使用此事件的最可能原因是获取拖动元素的当前索引
		//  与onEnd相同的属性
	}
});

四 element-ui中的table拖拽

注意 row-key的值是tableDate中必须是唯一的，一般用id

<template>
  <div>

    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      row-key="fileId"
    >
      >
      <el-table-column type="selection" width="55" />
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      multipleSelection: [],
      testModeCode: null
    }
  },
  mounted() {

    this.setSort()//注意要再这里触发一下
  },
  methods: {
    setSort() {
//获取table中的所有row
      const el = this.$refs.table.$el.querySelectorAll(
        '.el-table__body-wrapper > table > tbody'
      )[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        draggable: '.Nofolder',
        setData: function(dataTransfer) {
          console.log(dataTransfer, 'dataTransfer')
          dataTransfer.setData('Text', '')
        },
        onUnchoose: function(/** Event*/evt) {
        // same properties as onEnd
          return false
        },
        onChoose: function(evt) {
          console.log('0909', evt)
          // this_.$emit('handleIfSwipeabl', false)
          return false
        },
        // 监听拖拽事件结束时触发
        onEnd: evt => {
          // return false
          console.log(evt)
          // 拖动行的前一行
          const targetRow = this.tableData.splice(evt.oldIndex, 1)[0]
          // 拖动行的后一行
          this.tableData.splice(evt.newIndex, 0, targetRow)
          // 这里的tableData是你table上面绑定的list
        }
      })
    },
  }
}
</script>

可以参考源码https://github.com/SortableJS/Sortable