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

2024-09-29 08:57:08

问题描述

Sortable.js是一款优秀的js拖拽库，因为是原生js写的，所以性能不错，也支持移动端哦。本文举两个案例来学习一下。

案例一简单拖拽

效果图

代码附上

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

<!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>
    <h2>优先扣款顺序：</h2>
    <!-- 一般来说，拖动的结构就是：外边一个拖动容器，里面是一个又一个的拖动项 -->
    <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);
        /**
         * 插件自带的方法：
         *      1. sortable.toArray() 获取序列化后的每个item元素的id属性的数组
         *      2. Sortable.create(wrap, rules) 给拖动容器添加拖动规则
         * */
    </script>
</body>

</html>

案例二 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 />
    <h3>表头数据</h3>
    <pre>{{ tableHeader }}</pre>
    <br />
    <h3>表体数据</h3>
    <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>

最后附上官网：www.sortablejs.com/ 或: https://www.itxst.com/sortablejs/neuinffi.html

到此这篇关于拖拽插件sortable.js实现el-table表格拖拽效果的文章就介绍到这了,更多相关sortable.js 表格拖拽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

js 表格排序(编辑+拖拽+缩放)

Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ over
Vue Element Sortablejs实现表格列的拖拽案例详解

1. css: dragTable.css @charset "UTF-8"; .w-table{ height: 100%; width: 100%; float: left; } /* 拖动过程中,鼠标显示样式 */ .w-table_moving .el-table th .thead-cell{ cursor: move !important; } .w-table_moving .el-table__fixed{ cursor: not-allowed; } .w-ta
JS组件Bootstrap Table表格多行拖拽效果实现代码

前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态二.需求分析通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的
JS组件Bootstrap Table表格行拖拽效果实现代码

一.业务需求及实现效果项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2
Elementui表格组件+sortablejs实现行拖拽排序的示例代码

前言运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便效果实现方式 template部分 <el-table v-loading="loading" :default-sort="{prop: 'sortNum', order: 'ascending'}" :data="list" border align="left" > <el-tab
js 表格拖拽效果实例代码 (IE only)

Table Test (I.E. Only) /*得到表格列*/ function getCols(srcCellIndex,obj) { obj = typeof obj === 'string' ? document.getElementById(obj) : obj; var s = ''; s += ' ' s += obj.rows[0].cells[srcCellIndex].innerHTML + ' '; for(var i = 1;i ' + obj.rows[i].cells
javascript实现表格排序编辑拖拽缩放

简单表格排序可以双击编辑自定义编辑后的规则可拖动列进行列替换可推动边框进行列宽度的缩放复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
拖拽插件sortable.js实现el-table表格拖拽效果

目录问题描述案例一简单拖拽代码附上案例二 el-table表格拖拽效果图代码附上问题描述 Sortable.js是一款优秀的js拖拽库,因为是原生js写的,所以性能不错,也支持移动端哦.本文举两个案例来学习一下. 案例一简单拖拽效果图代码附上关于理解看注释哦,运行的话复制粘贴即可 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t
JS拖拽排序插件Sortable.js用法实例分析

本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js,再然后就有了这篇文章. 特点: 轻量级但功能强大移动列表项时有动画支持触屏设备和大多数浏览器(IE9及以下除外) 支持单个列表容器内部拖拽排序,也支持两个列表容器互相拖拽排序支持拖放操作和可选择的文本非常友善的滚动
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; •ng-drop:是否允许放入拖拽元素 •ng-drop-success($data, $event):拖拽元素放入的回调;$data:放入元素数据:$event拖拽事件对象 •ng-drag:元素是否允许拖拽 •ng-drag-success($data, $event):$data:拖拽元素数据,$event拖拽元素事件对象 •
Angular8 实现table表格表头固定效果

最近项目中有个需求,表头固定,内部实现滚动条.除了单个表头,还有多个表头的情况(下一篇中介绍). 效果图: html 结构按区域划分可以分为三个大部分,一共是通过4个table 组合成一个整体的table. 然后通过 col 属性去设定列的宽度,注意:这里的宽度必须要设置为固定值. 表头过滤功能暂时未实现. 水平滚动效果与垂直滚动效果监听主体table(浅绿色部分)滚动事件,同步上下滚动头部的table (深绿色部分)和左右滚动左侧固定的table(红色部分中的紫色部分) 代码 1 $(t
JS实现简单的表格增删

本文实例为大家分享了JS实现表格增删的具体代码,供大家参考,具体内容如下描述: JS--实现简单的表格增删. 效果: 实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--4.编号:文本框书名:文本框作者:文本框出版社:文本框
Sortable.js拖拽排序使用方法解析

最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上 ondragover 事件:拖拽元素在目
vue2.0使用Sortable.js实现的拖拽功能示例

简介在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码. 该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载. 实现效果实现后的效果如图所示:
JS拖拽插件实现步骤

这篇文章详细介绍了JS拖拽插件的实现步骤,主要从以下六步做详细分析,具体内容如下: 一.js拖拽插件的原理二.根据原理实现的最基本效果三.代码抽象与优化四.扩展:有效的拖拽元素五.性能优化和总结六.jquery插件化 js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠标 3.拖拽元素到一定位置,放开鼠标这里的过程涉及到三个dom事件:o