el-tabs 借助 sortablejs 实现 tab 拖拽功能

sortable.js 是一款 js
拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持
Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element
UI。你可以用来拖拽div、table等元素。

这里我们借助 sorttable 来实现 el-tabs 的拖拽功能。具体实现如下：

安装sortable.js

npm install sortablejs --save

案例demo

template

<el-tabs class="tabSign">
      <el-tab-pane
        v-for="item in projectTabeldata1"      
        :key="item.name"
        :name="item.name"       
      >
      </el-tab-pane>
</el-tabs>

js

import Sortable from "sortablejs"; //插件引入
methods: {
    //拖拽方法
    rowDrop() {
      const el = document.querySelector(".tabSign .el-tabs__nav"); //找到想要拖拽的那一列
      const _this = this;
      Sortable.create(el, {
        onEnd({ newIndex, oldIndex }) {
          //oldIIndex拖放前的位置， newIndex拖放后的位置 
          const currRow = _this.projectTabeldata1.splice(oldIndex, 1)[0]; //鼠标拖拽当前的el-tabs-pane
          _this.projectTabeldata1.splice(newIndex, 0, currRow);
        },
      });
    },
 }`

这个 rowDrop 方法可以在 mounted 中调用，如果是 dialog 弹窗可以在 @opened 事件中调用。

到此，拖动事件就完成了。