标签：vue sortable 表格 拖动 tableData evt 拖拽

vue+sortable实现表格拖拽

前言：

支持 vue3.0
支持表格拖拽
支持自定义拖拽
sortable官网

一、下载 sortable

npm install sortablejs --save

二、引入 sortable

import Sortable from “sortablejs”

三、使用

1. 找到自己 ui 框架表格body的class，我这里是 ant-table-tbody
   
2. 在表格渲染之后执行下方代码

<a-table :columns="tableHead" :data-source="tableData">
  <div slot="drag">
    <span class="drag">拖动</span>
  </div>
</a-table>

var el = document.querySelector(".ant-table-tbody");
new Sortable(el, {
    animation: 200, // 拖动动画
    handle: ".drag",  // 点击class为drag的容器才拖动
    forceFallback: true, // 拖动时移动鼠标
    onEnd: function (evt) {
        const top = scrollEl.scrollTop;
        // this.tableData 是我的表格数据
        this.tableData.splice(evt.newIndex,0,this.tableData.splice(evt.oldIndex, 1)[0]);
        var newArray = this.tableData.slice(0);
        this.tableData = [];
        this.$nextTick(function () {
          this.tableData = newArray;
        });
    },
});

标签：vue,sortable,表格,拖动,tableData,evt,拖拽
来源： https://blog.csdn.net/weixin_43923659/article/details/114080804

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。