表格拖拽、树状拖拽的各种方法

一、简单的表格拖拽

1、sortablejs

地址：https://www.itxst.com/sortablejs/neuinffi.html

配置项： http://www.sortablejs.com/options.html

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

第一步：安装

npm install sortablejs --save

第二步：使用方法

<template>
  <div style="width: 800px">
    <el-table :data="tableData" border row-key="id" align="left">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column
        v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"
      >
      </el-table-column>
    </el-table>
     <pre style="text-align: left">{{ dropCol }}</pre>
      <hr />
      <pre style="text-align: left">{{ tableData }}</pre>
  </div>
</template>
<script>
import Sortable from "sortablejs";

export default {
  data () {
    return {
      col: [......],//行表头
      dropCol: [.....],//列表头
      tableData: [.....],//表格数据
    };
  },
  mounted () {
    this.rowDrop();
    this.columnDrop();
  },
  methods: {
    //行拖拽
    rowDrop () {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        // 官网上的配置项,加到这里面来,可以实现各种效果和功能
        animation: 150,
        ghostClass: "blue-background-class",
        onEnd ({ newIndex, oldIndex }) {
          // oldIndex是拖动一行原来的位置，newIndex是拖动后的位置
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        }
      });
    },
    //列拖拽
    columnDrop () {
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      this.sortable = 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);
        }
      });
    }
  }
};
</script>

完整代码 

<template>
  <div style="width: 800px">
    <el-table :data="tableData" border row-key="id" align="left">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column
        v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"
      >
      </el-table-column>
    </el-table>
     <pre style="text-align: left">{{ dropCol }}</pre>
      <hr />
      <pre style="text-align: left">{{ tableData }}</pre>
  </div>
</template>
<script>
import Sortable from "sortablejs";

export default {
  data () {
    return {
      col: [
        {
          label: "日期",
          prop: "date"
        },
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "地址",
          prop: "address"
        }
      ],
      dropCol: [
        {
          label: "日期",
          prop: "date"
        },
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "地址",
          prop: "address"
        }
      ],
      tableData: [
        {
          id: "1",
          date: "2019-12-23",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 100 弄"
        },
        {
          id: "2",
          date: "2019-12-22",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 200 弄"
        },
        {
          id: "3",
          date: "2019-12-21",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 300 弄"
        },
        {
          id: "4",
          date: "2019-12-20",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 400 弄"
        }
      ]
    };
  },
  mounted () {
    this.rowDrop();
    this.columnDrop();
  },
  methods: {
    //行拖拽
    rowDrop () {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        // 官网上的配置项,加到这里面来,可以实现各种效果和功能
        animation: 150,
        ghostClass: "blue-background-class",
        onEnd ({ newIndex, oldIndex }) {
          // oldIndex是拖动一行原来的位置，newIndex是拖动后的位置
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        }
      });
    },
    //列拖拽
    columnDrop () {
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      this.sortable = 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);
        }
      });
    }
  }
};
</script>

二、树状拖拽 

1、drag-tree-table

地址：https://www.npmjs.com/package/drag-tree-table

基于vue实现的可以拖拽排序的树形表格

支持拖拽排序、固定头、拖拽改变行宽，checkbox多选、自定义单元格内容、设置行的背景色、动态控制某些行是否可以拖拽等等....

第一步：安装

npm i drag-tree-table

 第二步：使用方式

<template>
  <div id="app">
    <dragTreeTable
      :data="treeData"
      :onDrag="onTreeDataChange"
      fixed
      border>
    </dragTreeTable>
  </div>
</template>

<script>
import dragTreeTable from "drag-tree-table";
export default {
  name: "app",
  data() {
    return {
      treeData: {
        columns: [...],
        lists: [...]
      }
    };
  },
  components: {
    dragTreeTable
  },
  methods: {
    onTreeDataChange(list) {
      this.treeData.lists = list;
    }
  },
};
</script>

完整代码——方式一

<script>
import dragTreeTable from "drag-tree-table";

export default {
  components: {
    dragTreeTable
  },
  data () {
    return {
      treeData: {
        custom_field: {
          id: 'id',
          order: 'sort',
          lists: 'children',
          parent_id: 'parent_id'
        },
        columns: [
          { type: 'selection', title: '日期', field: 'date', width: 200 },
          { title: '姓名', field: 'name', width: 100 },
          {
            title: '操作',
            type: 'action',
            width: 350,
            align: 'center',
            actions: [
              {
                text: '查看角色',
                onclick: (item) => {
                  // item是当前行的数据
                  console.log(item)
                },
                formatter: (item) => {
                  return '<i style="margin-right:20px">查看角色</i>'
                }
              },
              {
                text: '编辑',
                onclick: (item) => {
                  // item是当前行的数据
                  console.log(item)
                },
                formatter: (item) => {
                  return '<i>编辑</i>'
                }
              }
            ]
          },
        ],
        lists: [{
          open: true,
          id: "1",
          parent_id: '0',
          date: "2019-12-23",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 100 弄",
          children: [{
            id: "1-1",
            parent_id: '1',
            date: "2019-12-22",
            name: "王小虎1-1",
            address: "上海市普陀区金沙江路 200 弄"
          }, {
            id: "1-2",
            parent_id: '1',
            date: "2019-12-22",
            name: "王小虎1-2",
            address: "上海市普陀区金沙江路 200 弄"
          },]
        },
        {
          id: "2",
          date: "2019-12-22",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 200 弄"
        },
        {
          id: "3",
          date: "2019-12-21",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 300 弄"
        },
        {
          id: "4",
          date: "2019-12-20",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 400 弄"
        }]
      },
    };
  },
  methods: {
    onTreeDataChange (list) {
      this.treeData.lists = list;
      // this.tableData = list;
    },
  }
};
</script>

完整代码——方式二

<template>
  <div style="width: 800px">
    <dragTreeTable
      ref="table"
      :data="treeData"
      @drag="onTreeDataChange"
      resize
      fixed
      :isdraggable="true"
    >
      <template #selection="{ row }">
        {{ row.date }}
      </template>
      <template #visible="{ row }">
        <div @click.stop>
          <el-switch
            @change="
              (val) => {
                visiableChange(val, row)
              }
            "
            v-model="row.visible"
            active-value="0"
            inactive-value="1"
          />
        </div>
      </template>
      <template #edit="{ row }">
        <el-button
          type="text"
          icon="el-icon-edit"
          @click.stop.prevent="handleUpdate(row)"
          >编辑</el-button
        >
        <el-button
          type="text"
          icon="el-icon-plus"
          @click.stop.prevent="handleAdd(row)"
          >新增</el-button
        >
        <el-button
          class="btn-delete"
          type="text"
          icon="el-icon-delete"
          @click.stop.prevent="handleDelete(row)"
          >删除</el-button
        >
      </template>
    </dragTreeTable>
  </div>
</template>
<script>
import dragTreeTable from "drag-tree-table";

export default {
  components: {
    dragTreeTable
  },
  data () {
    return {
      // 树状
      treeData: {
        custom_field: {
          id: 'id',
          order: 'sort',
          lists: 'children',
          parent_id: 'parent_id'
        },
        columns: [
          { type: 'selection', title: '日期', field: 'date', width: 200 },
          { title: '姓名', field: 'name', width: 100 },
          {
            type: 'visible',
            title: '可见',
            field: 'visible',
            width: 80
          },
          {
            type: 'edit',
            title: '操作',
            field: '',
            width: 200,
            align: 'center'
          },
        ],
        lists: [{
          open: true,
          id: "1",
          parent_id: '0',
          date: "2019-12-23",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 100 弄",
          children: [{
            id: "1-1",
            parent_id: '1',
            date: "2019-12-22",
            name: "王小虎1-1",
            address: "上海市普陀区金沙江路 200 弄"
          }, {
            id: "1-2",
            parent_id: '1',
            date: "2019-12-22",
            name: "王小虎1-2",
            address: "上海市普陀区金沙江路 200 弄"
          },]
        },
        {
          id: "2",
          date: "2019-12-22",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 200 弄"
        },
        {
          id: "3",
          date: "2019-12-21",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 300 弄"
        },
        {
          id: "4",
          date: "2019-12-20",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 400 弄"
        }]
      },
    };
  },
  methods: {
    onTreeDataChange (list) {
      this.treeData.lists = list;
    }, 
  }
};
</script>