文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

拖拽插件sortable.js如何实现el-table表格拖拽效果

2023-06-29 02:43

关注

这篇文章将为大家详细讲解有关拖拽插件sortable.js如何实现el-table表格拖拽效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

问题描述

Sortable.js是一款优秀的js拖拽库,因为是原生js写的,所以性能不错,也支持移动端哦。

案例一 简单拖拽

效果图

拖拽插件sortable.js如何实现el-table表格拖拽效果

代码附上

关于理解看注释哦,运行的话复制粘贴即可

<!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;                        height: auto;        }        #wrapBox div {            padding: 8px;            background-color: #fdfdfd;            border: solid 1px #eee;            margin-bottom: 10px;                        cursor: move;            font-size: 13px;        }                #wrapBox div:active {            background-color: #eee;        }    </style></head><body>    <h3>优先扣款顺序:</h3>    <!-- 一般来说,拖动的结构就是:外边一个拖动容器,里面是一个又一个的拖动项 -->    <div id="wrapBox">        <div data-id="1工商银行">工商银行</div>        <div data-id="2建设银行">建设银行</div>        <div data-id="3中国银行">中国银行</div>        <div data-id="4农业银行">农业银行</div>        <div data-id="5交通银行">交通银行</div>    </div>    <script>        //第一步,获取拖动容器        var wrap = document.getElementById('wrapBox');        //第二步,设置拖动项的拖动规则        var rules = {            animation: 500, // 拖动时的元素的位置变化的动画时长,            //拖动结束后的回调函数            onEnd: function (event) {                console.log('参数是拖动事件对象', event);                //获取拖动后容器中的每一项的位置排序                var arr = sortable.toArray();                console.log('位置排序', arr);            },        };        //第三步,初始化 --> 给拖动容器添加拖动规则         var sortable = Sortable.create(wrap, rules);            </script></body></html>

案例二 el-table表格拖拽

这里有一个细节,就是表头数据拖动的时候,可能导致渲染数据不对的问题,有的博主是搞两个表头数组数据的,其实也是一种解决问题的方案。不过个人愚见略有麻烦,其实一个表头数组数据即可。只要及时清空,重新赋值即可

效果图

拖拽插件sortable.js如何实现el-table表格拖拽效果

代码附上

这里使用的是vue,所以要下载哦 cnpm install sortablejs --save

代码直接复制粘贴即可运行看效果图了,关于使用请看注释哦

<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 />    <h4>表头数据</h4>    <pre>{{ tableHeader }}</pre>    <br />    <h4>表体数据</h4>    <pre>{{ tableBody }}</pre>  </div></template><script>// 引入sortablejs插件,拖拽主要靠的是这个插件import Sortable from "sortablejs";export default {  data() {    return {      // 表头数据      tableHeader: [        {          label: "姓名",          prop: "name",        },        {          label: "年龄",          prop: "age",        },        {          label: "家乡",          prop: "home",        },        {          label: "爱好",          prop: "hobby",        },      ],      // 表体数据      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: "念经",        },      ],    };  },  mounted() {    // 列的拖拽初始化    this.columnDropInit();    // 行的拖拽初始化    this.rowDropInit();  },  methods: {    //列拖拽    columnDropInit() {      // 第一步,获取列容器      const wrapperColumn = document.querySelector(        ".el-table__header-wrapper tr"      );      // 第二步,给列容器指定对应拖拽规则      this.sortable = Sortable.create(wrapperColumn, {        animation: 500,        delay: 0,        onEnd: (event) => {          console.log(            "拖拽完成以后发现表头数据并没有改变,所以需要我们手动更新表头数据",            this.tableHeader          );          console.log(            "根据旧索引和新索引去更新,其实就是交换位置",            event.oldIndex,            event.newIndex          );          // 接下来做索引的交换          let tempHableHeader = [...this.tableHeader]; // 先存一份临时变量表头数据          let temp; // 临时变量用于交换          temp = tempHableHeader[event.oldIndex - 2]; // 注意这里-2是因为,我在表格的前面加了两列(勾选框列,和序号列)          tempHableHeader[event.oldIndex - 2] =            tempHableHeader[event.newIndex - 2]; // 如果没有这两列,序号就是正常对应的,就不用减2          tempHableHeader[event.newIndex - 2] = temp;          // 重要的事情说三遍!!!          // 这里一定要先把表头数据清空,然后再下一轮中去赋值,否则会渲染错误          // 这里一定要先把表头数据清空,然后再下一轮中去赋值,否则会渲染错误          // 这里一定要先把表头数据清空,然后再下一轮中去赋值,否则会渲染错误          this.tableHeader = []; // 大家可以注掉试试哦          this.$nextTick(() => {            this.tableHeader = tempHableHeader;          });        },      });    },    // 行拖拽    // 个人认为行拖拽不用加,因为加了以后,就不能双击选行单元格的文字了,当然还是要听产品大佬安排    rowDropInit() {      // 第一步,获取行容器      const wrapperRow = document.querySelector(        ".el-table__body-wrapper tbody"      );      const that = this; // 存一份指向      // 第二步,给行容器指定对应拖拽规则      Sortable.create(wrapperRow, {        onEnd({ newIndex, oldIndex }) {          // 这里是区分上面的列拖拽的另外一种写法          // 首先删除原来的那一项,并且保存一份原来的那一项,因为splice返回的是一个数组,数组中的第一项就是删掉的那一项          const currRow = that.tableBody.splice(oldIndex, 1)[0];          // 然后把这一项加入到新位置上          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 {          // 设置拖动样式,好看一些          cursor: move;        }      }    }  }}</style>

关于“拖拽插件sortable.js如何实现el-table表格拖拽效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯