拖拽插件

# 拖拽插件

参考教程：

# 安装

1.引入sortable.js的包

npm install sortable.js --save

2.或者

npm i -S vuedraggable

vuedraggable依赖Sortable.js，所以下载了vuedraggable，我们便可以直接引入Sortable使用Sortable的特性。

vuedraggable是Sortable一种加强，实现组件化的思想，可以结合Vue，使用起来更方便

# 使用

# sortable

引入插件：

import Sortable from 'sortablejs';

看一个实现el-table拖拽的实例。

需要注意的是el-table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序后数据不对的情况。

<div class="contentCore-table table-common draggable">
      <el-table
        v-loading="listLoading"
        :data="tableList"
        element-loading-text="Loading"
        border
        highlight-current-row
        :row-key="(row) => row.id" 
        empty-text="暂时还没有创建品牌区"
      >
          something...
    </el-table>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

mounted(){
    this.rowDrop();
},
methods:{
     // 行拖拽
    rowDrop() {
      const tbody = document.querySelector(
        ".draggable .el-table__body-wrapper tbody" // 指定拖拽对象
      );
      const _this = this;
      Sortable.create(tbody, {
        animation: 200, // 拖拽延迟动画
        draggable: ".draggable .el-table__row", // 指定样式拖拽，这里指定table的行可拖拽
        // handle: ".icon_tuozhuai", // 指定某个元素拖拽，这里指定拖拽按钮拖拽
        onEnd({ newIndex, oldIndex }) { // 拖拽结束方法
           // 更新拖拽后的数组
          const currRow = _this.tableList.splice(oldIndex, 1)[0];
          _this.tableList.splice(newIndex, 0, currRow);
        },
      });
    },   
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

其它设置请参考教程。

# draggable

和sortable差不多，不过draggable使用Draggable组件来进行拖拽。

引入插件：

import Draggable from "vuedraggable";

看一个拖拽的实例：

<Draggable
  v-model="groupArr"
  handle=".list_items" <!--指定可拖拽的元素--> 
  animation="300"
  >
    <transition-group>
      <div
        v-for="(ite, ind) in dataList"
        :key="ite.code"
       >
          <div class="list_items">
              something...
          </div>
      </div>
    </transition-group>
</Draggable>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

data(){
    return {
        dataList:[]
    }
},
computed:{
    // 使用计算属性更新拖拽后的数组
    groupArr: {
      get: function () {
        return this.dataList;
      },
      set: function (v) {
        this.dataList.splice(0, this.dataList.length);
        for (let ite of v) {
          this.dataList.push(ite);
        }
        return v;
      },
    },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

其它设置请参考教程。

在GitHub上编辑

#plugins

上次更新: 2/24/2022, 2:46:31 PM

← 二维码插件《JavaScript教程》笔记→