vue+element+sortablejs实现拖拽功能

Posted 2022-10-14 fengshaopu

分为几部分：
第一：下载sortablejs插件
第二在文件内部导入sortablejs插件
第三进行配置使用
第四效果图展示

第一：下载sortablejs插件

 npm：
 npm install sortablejs --save 
 yarn：
 yarninstall sortablejs --save 
 cnpm：
 cnpm install sortablejs --save 

第二在文件内部导入sortablejs插件

import Sortablejs from ‘sortablejs’

第三进行配置使用
这里我用的是element的table
这部分是上面部分html

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" class="t1">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

这部分是script

<script>
import Sortable from 'sortablejs';
export default 
  data() 
    return 
      tableData: [
        
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        ,
        
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        ,
        
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        ,
        
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        ,
          
          date: "2016-05-07",
          name: "王y虎",
          address: "上海市普陀区金沙江路 1516 弄",
        ,
          
          date: "2016-05-08",
          name: "王q虎",
          address: "上海市普陀区金沙江路 1516 弄",
        ,
          
          date: "2016-05-09",
          name: "王小p",
          address: "上海市普陀区金沙江路 1516 弄",
        ,
      ],
    ;
  ,
  mounted() 
    this.rowDrop()  //在这里调用
  ,
  methods: 
     rowDrop () 
      const tbody = document.querySelector('.el-table__body tbody')
         Sortable.create(tbody, 
          disabled: false, // 是否开启拖拽
          ghostClass: 'sortable-ghost', //拖拽样式
          animation: 150, // 拖拽延时，效果更好看
          group:  // 是否开启跨表拖拽
            pull: false,
            put: false
          ,
          onEnd: (e) =>  // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改
            let arr = this.tableData; // 获取表数据
            arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理
            this.$nextTick(function () 
              this.tableData= arr; 
            );
          
        );
     
  ,
;
</script>
<style  scoped>
/deep/.sortable-ghost 
      opacity: 0.4;
      background: #00a7d0;
    
</style>

第四效果图展示

20220518_155424