拖拽插件sortable.js實(shí)現(xiàn)el-table表格拖拽效果

更新時間：2022年02月08日 09:28:10 作者：水冗水孚

本文主要介紹了拖拽插件sortable.js實(shí)現(xiàn)el-table表格拖拽效果，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

問題描述

Sortable.js是一款優(yōu)秀的js拖拽庫，因?yàn)槭窃鷍s寫的，所以性能不錯，也支持移動端哦。本文舉兩個案例來學(xué)習(xí)一下。

案例一簡單拖拽

效果圖

代碼附上

關(guān)于理解看注釋哦，運(yùn)行的話復(fù)制粘貼即可

<!DOCTYPE html>
<html>

<head>
? ? <meta charset="utf-8" />
? ? <title>sortable.js拖動例子</title>
? ? <meta name="viewport"
? ? ? ? content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
? ? <!-- 引入插件 -->
? ? <script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
? ? <style>
? ? ? ? #wrapBox {
? ? ? ? ? ? width: 360px;
? ? ? ? ? ? /* 拖動容器的高度，由拖動項(xiàng)的高度撐開 */
? ? ? ? ? ? height: auto;
? ? ? ? }

? ? ? ? #wrapBox div {
? ? ? ? ? ? padding: 8px;
? ? ? ? ? ? background-color: #fdfdfd;
? ? ? ? ? ? border: solid 1px #eee;
? ? ? ? ? ? margin-bottom: 10px;
? ? ? ? ? ? /* 添加鼠標(biāo)懸浮樣式為移動的樣式，要不然不好看 */
? ? ? ? ? ? cursor: move;
? ? ? ? ? ? font-size: 13px;
? ? ? ? }

? ? ? ? /* 設(shè)置鼠標(biāo)按下時候的樣式，加了好看些 */
? ? ? ? #wrapBox div:active {
? ? ? ? ? ? background-color: #eee;
? ? ? ? }
? ? </style>
</head>

<body>
? ? <h2>優(yōu)先扣款順序：</h2>
? ? <!-- 一般來說，拖動的結(jié)構(gòu)就是：外邊一個拖動容器，里面是一個又一個的拖動項(xiàng) -->
? ? <div id="wrapBox">
? ? ? ? <div data-id="1工商銀行">工商銀行</div>
? ? ? ? <div data-id="2建設(shè)銀行">建設(shè)銀行</div>
? ? ? ? <div data-id="3中國銀行">中國銀行</div>
? ? ? ? <div data-id="4農(nóng)業(yè)銀行">農(nóng)業(yè)銀行</div>
? ? ? ? <div data-id="5交通銀行">交通銀行</div>
? ? </div>
? ? <script>
? ? ? ? //第一步，獲取拖動容器
? ? ? ? var wrap = document.getElementById('wrapBox');
? ? ? ? //第二步，設(shè)置拖動項(xiàng)的拖動規(guī)則
? ? ? ? var rules = {
? ? ? ? ? ? animation: 500, // 拖動時的元素的位置變化的動畫時長，
? ? ? ? ? ? //拖動結(jié)束后的回調(diào)函數(shù)
? ? ? ? ? ? onEnd: function (event) {
? ? ? ? ? ? ? ? console.log('參數(shù)是拖動事件對象', event);
? ? ? ? ? ? ? ? //獲取拖動后容器中的每一項(xiàng)的位置排序
? ? ? ? ? ? ? ? var arr = sortable.toArray();
? ? ? ? ? ? ? ? console.log('位置排序', arr);
? ? ? ? ? ? },
? ? ? ? };
? ? ? ? //第三步，初始化 --> 給拖動容器添加拖動規(guī)則?
? ? ? ? var sortable = Sortable.create(wrap, rules);
? ? ? ? /**
? ? ? ? ?* 插件自帶的方法：
? ? ? ? ?* ? ? ?1. sortable.toArray() 獲取序列化后的每個item元素的id屬性的數(shù)組
? ? ? ? ?* ? ? ?2. Sortable.create(wrap, rules) 給拖動容器添加拖動規(guī)則
? ? ? ? ?* */
? ? </script>
</body>

</html>

案例二 el-table表格拖拽

這里有一個細(xì)節(jié)，就是表頭數(shù)據(jù)拖動的時候，可能導(dǎo)致渲染數(shù)據(jù)不對的問題，有的博主是搞兩個表頭數(shù)組數(shù)據(jù)的，其實(shí)也是一種解決問題的方案。不過個人愚見略有麻煩，其實(shí)一個表頭數(shù)組數(shù)據(jù)即可。只要及時清空，重新賦值即可

效果圖

代碼附上

這里使用的是vue，所以要下載哦 cnpm install sortablejs --save

代碼直接復(fù)制粘貼即可運(yùn)行看效果圖了，關(guān)于使用請看注釋哦

<template>
  <div class="myWrap">
    <el-table
      :data="tableBody"
      border
      row-key="id"
      :header-cell-style="{
        height: '48px',
        background: '#FAFAFA',
        color: '#333333',
        fontWeight: 'bold',
        fontSize: '14px',
      }"
    >
      <!-- 勾選框列 -->
      <el-table-column type="selection" width="48" fixed></el-table-column>
      <!-- 序號列 -->
      <el-table-column label="序號" type="index" width="50" fixed>
      </el-table-column>
      <!-- 表頭列 -->
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="item.index"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>
    </el-table>
    <br />
    <h3>表頭數(shù)據(jù)</h3>
    <pre>{{ tableHeader }}</pre>
    <br />
    <h3>表體數(shù)據(jù)</h3>
    <pre>{{ tableBody }}</pre>
  </div>
</template>
<script>
// 引入sortablejs插件，拖拽主要靠的是這個插件
import Sortable from "sortablejs";
export default {
  data() {
    return {
      // 表頭數(shù)據(jù)
      tableHeader: [
        {
          label: "姓名",
          prop: "name",
        },
        {
          label: "年齡",
          prop: "age",
        },
        {
          label: "家鄉(xiāng)",
          prop: "home",
        },
        {
          label: "愛好",
          prop: "hobby",
        },
      ],
      // 表體數(shù)據(jù)
      tableBody: [
        {
          id: "1",
          name: "孫悟空",
          age: 500,
          home: "花果山",
          hobby: "吃桃子",
        },
        {
          id: "2",
          name: "豬八戒",
          age: 88,
          home: "高老莊",
          hobby: "吃包子",
        },
        {
          id: "3",
          name: "沙和尚",
          age: 1000,
          home: "通天河",
          hobby: "游泳",
        },
        {
          id: "4",
          name: "唐僧",
          age: 99999,
          home: "東土大唐",
          hobby: "念經(jīng)",
        },
      ],
    };
  },
  mounted() {
    // 列的拖拽初始化
    this.columnDropInit();
    // 行的拖拽初始化
    this.rowDropInit();
  },
  methods: {
    //列拖拽
    columnDropInit() {
      // 第一步，獲取列容器
      const wrapperColumn = document.querySelector(
        ".el-table__header-wrapper tr"
      );
      // 第二步，給列容器指定對應(yīng)拖拽規(guī)則
      this.sortable = Sortable.create(wrapperColumn, {
        animation: 500,
        delay: 0,
        onEnd: (event) => {
          console.log(
            "拖拽完成以后發(fā)現(xiàn)表頭數(shù)據(jù)并沒有改變，所以需要我們手動更新表頭數(shù)據(jù)",
            this.tableHeader
          );
          console.log(
            "根據(jù)舊索引和新索引去更新，其實(shí)就是交換位置",
            event.oldIndex,
            event.newIndex
          );

          // 接下來做索引的交換
          let tempHableHeader = [...this.tableHeader]; // 先存一份臨時變量表頭數(shù)據(jù)
          let temp; // 臨時變量用于交換
          temp = tempHableHeader[event.oldIndex - 2]; // 注意這里-2是因?yàn)?，我在表格的前面加了兩列（勾選框列，和序號列）
          tempHableHeader[event.oldIndex - 2] =
            tempHableHeader[event.newIndex - 2]; // 如果沒有這兩列，序號就是正常對應(yīng)的，就不用減2
          tempHableHeader[event.newIndex - 2] = temp;

          // 重要的事情說三遍?。?！
          // 這里一定要先把表頭數(shù)據(jù)清空，然后再下一輪中去賦值，否則會渲染錯誤
          // 這里一定要先把表頭數(shù)據(jù)清空，然后再下一輪中去賦值，否則會渲染錯誤
          // 這里一定要先把表頭數(shù)據(jù)清空，然后再下一輪中去賦值，否則會渲染錯誤
          this.tableHeader = []; // 大家可以注掉試試哦
          this.$nextTick(() => {
            this.tableHeader = tempHableHeader;
          });
        },
      });
    },
    // 行拖拽
    // 個人認(rèn)為行拖拽不用加，因?yàn)榧恿艘院螅筒荒茈p擊選行單元格的文字了，當(dāng)然還是要聽產(chǎn)品大佬安排
    rowDropInit() {
      // 第一步，獲取行容器
      const wrapperRow = document.querySelector(
        ".el-table__body-wrapper tbody"
      );
      const that = this; // 存一份指向
      // 第二步，給行容器指定對應(yīng)拖拽規(guī)則
      Sortable.create(wrapperRow, {
        onEnd({ newIndex, oldIndex }) {
          // 這里是區(qū)分上面的列拖拽的另外一種寫法

          // 首先刪除原來的那一項(xiàng)，并且保存一份原來的那一項(xiàng)，因?yàn)閟plice返回的是一個數(shù)組，數(shù)組中的第一項(xiàng)就是刪掉的那一項(xiàng)
          const currRow = that.tableBody.splice(oldIndex, 1)[0];
          // 然后把這一項(xiàng)加入到新位置上
          that.tableBody.splice(newIndex, 0, currRow);
        },
      });
    },
  },
};
</script>
<style lang='less' scoped>
.myWrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 25px;
  /deep/ .el-table {
    .el-table__header-wrapper {
      tr {
        th {
          // 設(shè)置拖動樣式，好看一些
          cursor: move;
        }
      }
    }
  }
}
</style>