sortablejs拖拽排序功能（vue）

有些需求是要求有表格拖拽排序，或者是一些div拖拽排序

所以我们可以用sortablejs进行，官方文档为：http://www.sortablejs.com/

一、下载

npm install sortablejs --save

二、使用

例子1: table拖拽（element-ui）

效果图：

• 行拖拽

• 列拖拽
  

<template>
  <div class="home">
    <!-- 在这里要注意，表格一定添加row-key这个属性，因为是用来优化 Table 的渲染，不然拖拽无效果 -->
    <el-table :data="tableData" style="width: 60%" row-key="id">
      <el-table-column
        v-for="(item, index) of dropCol"
        :prop="dropCol[index].prop"
        :label="dropCol[index].label"
        :width="dropCol[index].width"
        :key="`column_${index}`"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
// 引入sortablejs
import Sortable from "sortablejs";

export default {
  name: "home",
  data() {
    return {
      dropCol: [
        {
          label: "日期",
          prop: "date",
          width: "180"
        },
        {
          label: "姓名",
          prop: "name",
          width: "180"
        },
        {
          label: "地址",
          prop: "address",
          width: ""
        }
      ],
      tableData: [
        {
          id: 1,
          date: "20160502",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 2,
          date: "20160504",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          id: 3,
          date: "20160501",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          id: 4,
          date: "20160503",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  mounted() {
    //  拖拽事件一定要放在 mounted 生命周期内，因为这时真实的DOM才渲染出来
    this.rowDrop();
    this.columnDrop();
  },
  methods: {
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        }
      });
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex];
          this.dropCol.splice(evt.oldIndex, 1);
          this.dropCol.splice(evt.newIndex, 0, oldItem);
          // 截止上面为止，数组已经进行了更换，但是会看到表格的头部label没有更新，所以就进行了数组清空重新赋值
          const newArray = this.dropCol.slice(0);
          this.dropCol = [];
          this.$nextTick(() => {
            this.dropCol = newArray;
          });
        }
      });
    }
  }
};
</script>

<style>
</style>

例子2: div拖拽

效果：

<template>
  <div class="home">
    <div class="floor">
      <div class="column_box" v-for="(item, index) in floorArr" :key="`floor_${index}`">
        <span>{{item}}</span>
      </div>
    </div>
  </div>
</template>

<script>
// 引入sortablejs
import Sortable from "sortablejs";

export default {
  name: "home",
  data() {
    return {
      floorArr: ["王小虎1", "王小虎2", "王小虎3", "王小虎4"]
    };
  },
  mounted() {
    //  拖拽事件一定要放在 mounted 生命周期内，因为这时真实的DOM才渲染出来
    this.rowDrop();
  },
  methods: {
   // 行拖拽 
    rowDrop() {
      const tbody = document.querySelector(".floor");
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.floorArr.splice(oldIndex, 1)[0];
          _this.floorArr.splice(newIndex, 0, currRow);
          // 截止上面为止，数组已经进行了更换，但是会看到视图没有更新，所以就进行了数组清空重新赋值
          const newArray = _this.floorArr.slice(0);
          _this.floorArr = [];
          _this.$nextTick(() => {
            _this.floorArr = newArray;
          });
        }
      });
    }
  }
};
</script>

<style>
.column_box {
  width: 200px;
  height: 100px;
  text-align: center;
  border: 1px solid red;
}
</style>