拖拽插件的用法

本说明文档只介绍拖拽插件基本用法，如遇复杂需求，具体配置参数可参考官网http://www.sortablejs.com/options.html

一、使用vxe-table时：

• TODO row-key必须参数，否则拖拽后位置错乱
• TODO ‘el-icon-rank’为触发拖拽类名，'asl'为拖拽手型类名
• TODO 拖拽时可给元素额外增加自定义类名
• TODO 使列表中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动。如不写此属性，默认元素任意位置可拖拽。
• TODO 单位：ms，定义排序动画的时间，建议60ms
• TODO 拖拽结束时触发的事件，默认参考以下写法，将数据移动至对应位置即可

<vxe-table
  size="small"
  border
  row-key // TODO row-key必须参数，否则拖拽后位置错乱
  :data="tableData"
  :height="tableHeight"
  :header-cell-style="TABLE_HEADER_CELL_STYLE"
  :cell-style="TABLE_CELL_STYLE"
>
  <vxe-table-column title="字段A" field="fieldA" align="center"></vxe-table-column>
  <vxe-table-column title="字段B" field="fieldB" align="center"></vxe-table-column>
  <vxe-table-column title="拖拽" align="center" width="80">
    <template slot-scope="scope">
      <i class="el-icon-rank asl f18"></i> // TODO ‘el-icon-rank’为触发拖拽类名，'asl'为拖拽手型类名
    </template>
  </vxe-table-column>
</vxe-table>
import {innerHeight, TABLE_HEADER_CELL_STYLE, TABLE_CELL_STYLE} from '@/mixin/page';
const sortablejs = () => import(/* webpackChunkName: 'async_vendors/sortablejs'*/ 'sortablejs');

data() {
  return {
    tableData: [], // 表格数据
    sortable: null, // 拖拽对象
    TABLE_HEADER_CELL_STYLE,
    TABLE_CELL_STYLE,
  };
},
methods: {
  /**
   * 表格拖拽
   */
  async initSortable() {
    let el = $('.sort-table > .body--wrapper >.vxe-table--body tbody')[0]; // TODO 固定写法
    let Sortable = await sortablejs();
    this.sortable = Sortable.default.create(el, {
      ghostClass: 'sortable-ghost',  // TODO 拖拽时可给元素额外增加自定义类名
      handle: '.el-icon-rank', // TODO 使列表中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动。如不写此属性，默认元素任意位置可拖拽。
      animation: 60, // TODO 单位：ms，定义排序动画的时间，建议60ms
      onEnd: e => { // TODO 拖拽结束时触发的事件，默认参考以下写法，将数据移动至对应位置即可
        let targetRow = this.tableData.splice(e.oldIndex, 1)[0];
        this.tableData.splice(e.newIndex, 0, targetRow);
      }
    });
  },
  /**
   * 销毁排序实例
   */
  destroySortable() {
    if (this.sortable) {
      this.sortable.destroy();
      this.sortable = null;
    }
  },
},
mounted() {
  this.initSortable();
},
beforeDestroy() {
  this.destroySortable();
},

二、使用el-table时：

• TODO 必须指定一个确定唯一值字段，否则拖拽后位置错乱
• TODO 拖拽时可给元素额外增加自定义类名
• TODO 使列表中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动。如不写此属性，默认元素任意位置可拖拽。
• TODO 单位：ms，定义排序动画的时间，建议60ms
• TODO 拖拽结束时触发的事件，默认参考以下写法，将数据移动至对应位置即可

<el-table
  class="sort-table"
  border
  size="small"
  row-key="id"  // TODO 必须指定一个确定唯一值字段，否则拖拽后位置错乱
  :data="tableData"
  :height="tableHeight"
  :header-cell-style="TABLE_HEADER_CELL_STYLE"
  :cell-style="TABLE_CELL_STYLE"
>
  <el-table-column label="字段A" prop="fieldA" header-align="center" align="left" width="150"></el-table-column>
  <el-table-column label="字段B" prop="fieldB" header-align="center" align="left" width="150"></el-table-column>
  <el-table-column label="拖拽" align="center" width="80">
    <template slot-scope="scope">
      <i class="el-icon-rank asl f18"></i> // TODO ‘el-icon-rank’为触发拖拽类名，'asl'为拖拽手型类名
    </template>
  </el-table-column>
</el-table>
import {innerHeight, TABLE_HEADER_CELL_STYLE, TABLE_CELL_STYLE} from '@/mixin/page';
const sortablejs = () => import(/* webpackChunkName: 'async_vendors/sortablejs'*/ 'sortablejs');

data() {
  return {
    tableData: [], // 表格数据
    sortable: null, // 拖拽对象
    TABLE_HEADER_CELL_STYLE,
    TABLE_CELL_STYLE,
  };
},
methods: {
  /**
   * 表格拖拽
   */
  async initSortable() {
    let el = $('.sort-table > .el-table__body-wrapper > table > tbody')[0]; // TODO 固定写法
    let Sortable = await sortablejs();
    this.sortable = Sortable.default.create(el, {
      ghostClass: 'sortable-ghost',  // TODO 拖拽时可给元素额外增加自定义类名
      handle: '.el-icon-rank', // TODO 使列表中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动。如不写此属性，默认元素任意位置可拖拽。
      animation: 60, // TODO 单位：ms，定义排序动画的时间，建议60ms
      onEnd: e => { // TODO 拖拽结束时触发的事件，默认参考以下写法，将数据移动至对应位置即可
        let targetRow = this.tableData.splice(e.oldIndex, 1)[0];
        this.tableData.splice(e.newIndex, 0, targetRow);
      }
    });
  },
  /**
   * 销毁排序实例
   */
  destroySortable() {
    if (this.sortable) {
      this.sortable.destroy();
      this.sortable = null;
    }
  },
},
mounted() {
  this.initSortable();
},
beforeDestroy() {
  this.destroySortable();
},