[element-ui] el-tab 标签页拖拽(拖动) sortablejs插件实现

npm install sortablejs --save

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拖放后的位置  //tabOptionList为遍历的tab签
          const currRow = _this.tabOptionList.splice(oldIndex, 1)[0]; //鼠标拖拽当前的el-tabs-pane
          _this.tabOptionList.splice(newIndex, 0, currRow); //tableData 是存放所以el-tabs-pane的数组
          // 截止上面为止，数组已经进行了更换，但是会看到视图没有更新，所以就进行了数组清空重新赋值
          const newArray = _this.tabOptionList.slice(0);
          _this.tabOptionList= [];
          _this.$nextTick(() => {
            _this.tabOptionList= newArray;
          });
        },
      });
    },
 }

destroy SortableJS，一个简单的 JS 拖拽库

sortable.destroy(); // 销毁容器排序

参考：

vue + element 中tab标签页拖拽(拖动) sortablejs插件实现

sortablejs拖拽排序功能（vue）