Vue.js中Element UI下组件el-tabs的拖拽效果

为了实现el-tabs标签页下的el-tab-pane拖拽效果，能够使用第三方插件sortable进行实现，github 地址：https://github.com/SortableJS/Sortable 方法以下：

一、npm安装sortable.js 

$ npm install sortablejs --save

二、在<script>下导入

import Sortable from "sortablejs"

三、代码以下

mounted(){ this.rowDrop(); //行拖拽效果 } rowDrop() { const el= document.querySelector('.el-tabs_nav'); const _this = this; Sortable.create(el, { onEnd({ newIndex, oldIndex }) { //oldIIndex拖放前的位置， newIndex拖放后的位置 const currRow = _this.tableData.splice(oldIndex, 1)[0]； //鼠标拖拽当前的el-tabs-pane _this.tableData.splice(newIndex, 0, currRow)； //tableData 是存放因此el-tabs-pane的数组 　　} }) },

四、列的拖拽相似，便可实现el-tabs标签页的拖拽效果