element 的 table使用Sortable.js进行拖拽的时候，禁止某些列的拖拽功能

Posted 2023-04-11

参考技术A 因为element中的table不具备拖拽排序的功能，所以有时候会用到Sortable.js去实现拖拽的功能。具体的使用方法可以参考以下 https://blog.csdn.net/weixin_34301307/article/details/87527853

但是有时候我们只想特定的列能够进行拖拽，特别是在有input输入框的时候，如果包含input的列也能进行拖拽的话，会存在鼠标不能拖动选中input输入框里面内容的问题，因为但在input上拖动时，已经启动了拖拽功能，所有会导致无法选中input里面的内容，最直接效果就是，但你想复制粘贴input里面内容的时候，你会发现压根选不到里面的内容，而是被拖着走。

给需要拖动的列加一个共同的class，比如

然后运用handle属性就可以啦，handle就是用来控制允许拖动的元素的

element+sortablejs插件实现拖拽排序效果

背景
1、后台管理系统中表格需要实现行拖拽功能
2、表格使用element组件库中el-table

方案介绍

1、Sortable.js
介绍：Sortable.js是一款轻量级的拖放排序列表的js插件
引用自官方文档：No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.
参考地址： https://github.com/SortableJS/Sortable

2、vuedraggable
介绍：基于Sortable.js的vue组件，用以实现拖拽功能
引用自官方文档：Vue drag-and-drop component based on Sortable.js
参考地址： https://github.com/SortableJS/Vue.Draggable

遇到的问题
在使用vuedraggable的过程中，发现必须用包裹拖动项的父级元素，但是element组件库对table进行封装，无法直接包裹拖动项（即tr）的父级元素

如果你的项目中，表格未使用组件库，实现可以参考 https://www.jb51.net/article/162648.htm

解决方案
使用 sortable.js
步骤一： 安装

npm install sortablejs --save

步骤二：引入（在main中全局引入或者需要的组件页面引入）

import Sortable from ‘sortablejs‘ //按需引入

步骤三： el-table 添加row-key属性

<el-table :data="data" border class="table" row-key="id" ref="dragTable" highlight-current-row>
    <el-table-column prop="id" label="序号" align="center">
    </el-table-column>
    <el-table-column prop="title" label="标题" align="center">
    </el-table-column>
</el-table>

步骤四 ： 将拖拽元素设置为要拖动项的父级元素

mounted() {
    // 表格中需要实现行拖动，所以选中tr的父级元素
    const table = document.querySelector(‘.el-table__body-wrapper tbody‘)
    const self = this
    Sortable.create(table, {
        onEnd({ newIndex, oldIndex }) {
            console.log(newIndex, oldIndex)
            const targetRow = self.resourceList.splice(oldIndex, 1)[0]
            self.resourceList.splice(newIndex, 0, targetRow)
        }
    })
}

plan b：

mounted(){
    this.setSort();//拖拽
},
methods: {
    setSort(){
        // 表格中需要实现行拖动，所以选中tr的父级元素
        const el = this.$refs.dragTable.$el.querySelectorAll(‘.el-table__body-wrapper > table > tbody‘)[0] // table
        this.sortable = Sortable.create(el,{
            ghostClass:‘sortable-ghost‘,
            setData:function(dataTransfer){
                dataTransfer.setData(‘Text‘, ‘‘)
            },
            onEnd: evt => {
                // console.log(this.data) //:data="data" 所有数据
                const targetRow = this.data.splice(evt.oldIndex, 1)[0]; // this.data是表格所有数据
                // console.log(targetRow) // 挪动是单个数据
                this.data.splice(evt.newIndex, 0, targetRow);
            }
        })
    },
}

借鉴文章：https://www.zhangshengrong.com/p/2EaE06yO1M/