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標籤頁的拖拽效果