分别使用sortablejs 和 vuedraggable 使用拖拽排序的效果

左侧排序：vuedraggable

<template>
  <div class="theme-list">
    <h2>
      <span>主题管理</span>
      <b class="iconfont icon-xinzeng" @click="handleAdd"></b>
    </h2>
    <div class="search-box">
      <el-input
        size="mini"
        v-model="queryString"
        placeholder="请输入"
        suffix-icon="el-icon-search"
        @change="doSearch"
        clearable
      ></el-input>
    </div>
    <div class="sort-btn">
      <el-button size="mini" v-if="isShowSort" @click="handleSortSave">保存排序</el-button>
      <el-button size="mini" v-if="isShowSort" @click="handleSortClose">取消排序</el-button>
      <span v-show="!isShowSort">注：可拖动排序</span>
    </div>
    <ul class="type-list">
      <draggable :list="dataList" ghost-class="ghost" @sort="handleSortChange">
        <li
          v-for="(item,index) of dataList"
          :key="index"
          :class="{'active':item.id && activeCode===item.id}"
        >
          <span class="ellipsis cursor-pointer" @click="exgLeftBar(item)">{{item.name}}</span>
          <p>
            <i class="iconfont icon-xiugai" @click.stop="handleEdit(item.id)"></i>
            <i class="iconfont icon-shanchu" @click.stop="handleDel(item.id)"></i>
          </p>
        </li>
      </draggable>
    </ul>
    <theme-form ref="themeForm" @saveSuccess="loadData"></theme-form>
  </div>
</template>

import Draggable from 'vuedraggable'
components: {
  Draggable
},
 /**
   * 激活排序保存按钮
   */
  handleSortChange() {
    this.isShowSort = true
  },
/**
   * 排序保存
   */
  handleSortSave() {
    this.isShowSort = false
    let ids = this.dataList.map(d => d.id)
    this.$api[process.env.VUE_APP_NAME]
      .themeSortSave(ids)
      .then(res => {
        this.$message.success('排序保存成功！')
      })
      .catch(() => {
        this.$message.error('排序保存失败！')
      })
  },

右侧排序：sortable.js

<template>
  <div class="module-list" v-loading="isLoading">
    <div class="module-list-header">
      <div class="header-btn">
        <el-button size="mini" @click="handleAdd">
          <i class="iconfont icon-xinzeng"></i>新增
        </el-button>
        <div class="sort-btn">
          <el-button size="mini" type v-show="isShowSort" @click="handleSortSave">保存排序</el-button>
          <el-button size="mini" type v-show="isShowSort" @click="handleSortClose">取消排序</el-button>
          <span v-show="!isShowSort">注：可拖动排序</span>
        </div>
      </div>
    </div>

    <div class="module-list-table">
      <el-table
        class="table-list"
        row-key="id"
        ref="table"
        :data="dataList"
        style="width: 100%"
        :header-cell-style="{background:'#FAFAFA'}"
        height="100%"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="moduleName" label="模块名称"></el-table-column>
        <el-table-column prop="categoryName" label="分类"></el-table-column>
        <el-table-column prop="targetName" label="针对人群"></el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDel(scope.row.moduleId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <module-form ref="moduleForm" :currentType="currentType" @saveSuccess="saveSuccess" />
  </div>
</template>

    /**
     * table 列表拖拽初始化函数
     */
    initSort() {
      const el = document.querySelectorAll(
        '.table-list .el-table__body-wrapper > table > tbody'
      )[0] // 获取拖拽的容器 .table-list 一定是table上的class 如果是其他上的class名称，可能会无法拖拽
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        // handle: ".drag-item", // 指定推拽列
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onSort: evt => {
          this.isShowSort = true
        },
        onEnd: evt => {
          this.$nextTick(() => {
            // 实现推拽的代码，先在原数组中删除当前推拽的对象，然后在将它添加到对应的位置
            // targetObj当前推拽的对象，evt.oldIndex推拽对象原来的下标，evt.newIndex推拽对象要推拽到的下标
            let targetObj = this.dataList.splice(evt.oldIndex, 1)[0]
            this.dataList.splice(evt.newIndex, 0, targetObj)
          })
        }
      })
    },
    /**
     * 排序保存
     */
    handleSortSave() {
      this.isShowSort = false
      let ids = this.dataList.map(d => d.moduleId)
      let params = {
        subjectId: this.currentType.id,
        moduleIds: ids
      }
      this.$api[process.env.VUE_APP_NAME]
        .moduleSortSave(params)
        .then(res => {
          this.$message.success('排序保存成功！')
        })
        .catch(() => {
          this.$message.error('排序保存失败！')
        })
    },
    /**
     * 获取列表数据
     */
    loadData(params) {
      this.dataList = []
      this.$api[process.env.VUE_APP_NAME].getmoduleListByThemeId(params).then(res => {
        if (res.body) {
          let array = res.body
          array.forEach((element, index) => {
            if (!element.id) element['id'] = index
          })
          this.dataList = array
        }
      })
    },