vue2中，使用sortablejs组件和vuedraggable实现拖拽排序功能

1、基本介绍

Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

官网：http://www.sortablejs.com/

npm官网：https://www.npmjs.com/package/sortablejs

api配置项：http://www.sortablejs.com/options.html

中文文档：https://www.itxst.com/sortablejs/neuinffi.html

github地址：https://github.com/SortableJS/Vue.Draggable

vuedraggable地址：https://github.com/SortableJS/Vue.Draggable

demo1:https://sortablejs.github.io/Vue.Draggable/#/table-example

demo2：https://david-desmaisons.github.io/draggable-example/

安装

yarn add vuedraggable

npm i -S vuedraggable
1
2
3

2、基础示例

示例


   {{element.name}}



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

基础示例-div

<div id="itxst">
    <div data-id="1">item 1div>
    <div data-id="2">item 2div>
    <div data-id="3">item 3div>
div>
<script>
    //获取对象
    var el = document.getElementById('itxst');
    //设置配置
    var ops = {
        animation: 1000,
        //拖动结束
        onEnd: function (evt) {
            console.log(evt);
            //获取拖动后的排序
            var arr = sortable.toArray();
            alert(JSON.stringify(arr));
        },};
    //初始化
    var sortable = Sortable.create(el, ops);
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

基础示例-表格

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>sortable.js table表格拖拽例子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> 
head>
<body>
    <table id="itxst">
        <tbody>
            <tr>
                <td>1td>
                <td>www.baidu.comtd>
            tr>
        tbody>
        <tbody>
            <tr>
                <td>2td>
                <td>www.itxst.comtd>
            tr>
        tbody>
    table>
    <script>
        //获取对象
        var el = document.getElementById('itxst');
        //设置配置
        var ops = { animation: 1000 };
        //初始化
        var sortable = Sortable.create(el, ops);
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

3、应用实例

场景：需要对表格数据进行拖拽排序

1、安装

npm install sortablejs --save
1

2、引入

import Sortable from 'sortablejs'
1

3、使用

使用的vue + element

3.1、在 el-tabl 内添加ref，方便我们获取节点

<el-table ref="dragTable" :data="listdata" border style="width: 100%">
1

3.2、编写拖拽的方法

setSort() {
  const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]// 获取 tbody 节点
  this.sortable = Sortable.create(el, {// 初始化顺便设置配置
    ghostClass: 'sortable-ghost', // 停靠位置样式（要拖动的元素的样式，给拖动的元素添加类名，自己再css中设置样式）
    setData: function(dataTransfer, dragEl) { // 避免 Firefox 的bug
      dataTransfer.setData('Text', dragEl.textContent)
    },
    // 拖动结束的回调
    onEnd: evt => {
      let oldList = this.listdata[evt.oldIndex];// oldIndex旧的排序
      let newList = this.listdata[evt.newIndex];// newIndex新的排序
      // 需要传递的参数
      this.sort = {  
        currId: oldList.id,
        newId: newList.id,
        currSort: oldList.sort,
        newSort: newList.sort
      }
      this.$emit('sortList', this.sort)// 触发父元素的发送请求，顺便把参数传过去
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.3、监听排序变化，重新渲染

watch: {
   listdata(){
     console.log('ok')
     this.oldList = this.listdata.map(v => v.id)
     this.newList = this.oldList.slice()
     this.$nextTick(() => {
       this.setSort()
     })
   }
 }
1
2
3
4
5
6
7
8
9
10

3.4、注册data

data(){
   return {
     sortable: null,
     oldList: [],
     newList: [],
     sort: {
       currId: 0,
       newId: 0,
       currSort: 0,
       newSort: 0
     }
   }
 },
1
2
3
4
5
6
7
8
9
10
11
12
13

注：拖拽排序的功能就完成了，但是需要注意：每个后端给的接口都不一样，你需要根据接口的返回参数以及需要的参数进行修改。

4、el-table后端排序实现

1、如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

<el-table @sort-change='tableSortChange'>
       <el-table-column sortable='custom' prop="createTime" label="创建时间">
       el-table-column>
el-table>
1
2
3
4

2、定义methods监听sort-change事件

tableSortChange(column) {
      this.listQuery.pageNo = 1
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop
        this.listQuery.order = 'desc'
      } else {
        this.listQuery.sortby = column.prop
        this.listQuery.order = 'asc'
      }
    this.getList()
 }
1
2
3
4
5
6
7
8
9
10
11

3、通过axios提交请求数据到后端

getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    }
1
2
3
4
5
6
7
8

5、vue使用sortable实现拖拽排序完整版

vue项目中使用sortable实现对块元素拖拽进行排序

1、安装

npm install sortablejs --save
1

2、引入

import Sortable from 'sortablejs'
1

3、使用

相关阅读:
技术人员怎样提升对业务的理解
 利用Spring Boot框架做事件发布和监听
 新增用户登录和资产登录通知功能，支持指定目录运行作业中心命令，JumpServer堡垒机v3.8.0发布
 Linux下实现U盘的挂载，复制文件和卸载等操作
 【一起进大厂】最新Java并发面试题整理
 渲染农场：设计师提高工作效率的得力助手
 机器学习-学习笔记(一) --> （假设空间 & 版本空间）及归纳偏好
 2023 龙蜥操作系统大会演讲实录：《兼容龙蜥的云原生大模型数据计算系统——πDataCS》
虚拟土地+VRGDA：一种可持续的元宇宙土地销售策略
 【算法面试必刷Java版七】链表中环的入口结点
原文地址：https://blog.csdn.net/weixin_44867717/article/details/128167948