当前位置：首页 > news >正文

draggable插件——实现元素的拖动排序——拖动和不可拖动的两种情况处理

news 2025/7/28 0:30:16

最近在写后台管理系统的时候，遇到一个需求，就是关于拖动排序的功能。

我之前是写过一个关于拖动表格的功能，此功能可以实现表格中的每一行数据上下拖动实现排序的效果。
vue——实现表格的拖拽排序功能——技能提升

但是目前我这边的需求是实现属性的拖动，直接上图：
在这里插入图片描述
比如上图，我要拖动【管制卡号】到【客供】的后面

话不多说，直接上代码：

解决步骤1：安装`vuedraggable`插件

npm install vuedraggable@2.24.3  //我这边安装的是这个版本，你也可以直接安装最新版本的，就是不指定版本号就是最新版本了

解决步骤2：局部页面使用

组件引入

import draggable from 'vuedraggable';

组件中的注册

components: { draggable },

效果图中左侧属性的渲染：
this.枚举列表 = ['测试','样板/批量','新单/返单']

<a-checkbox-groupv-model="canDragArr"
><draggable@start.stop="dragStart"@end.stop="dragEnd"@update.stop="onUpdate"><transition-group type="transition" name="field_list"><a-checkboxv-for="item1 in 枚举列表":key="item1":value="item1"style="min-width: 100px">{{ item1 }}</a-checkbox></transition-group></draggable>
</a-checkbox-group>

分析上面的代码：

关于拖动排序，要用到的函数有：【@start】【@end】【@update】

对应的函数：

dragStart() {//
},
dragEnd() {//
},
/*** draggable拖拽组件对象重新排序*/
onUpdate({ newIndex, oldIndex }) {const newColumnsList = [];// 防止页面变化const columnsList = JSON.parse(JSON.stringify(this.枚举列表));newColumnsList[newIndex] = columnsList[oldIndex];columnsList.splice(oldIndex, 1);columnsList.forEach((value, index) => {if (newColumnsList[index]) {newColumnsList[index + 1] = value;} else {newColumnsList[index] = value;}});console.log('newColumnsList', newColumnsList);
},

上面代码中的newColumnsList就是拖动排序后的数组了。。。

如果是部分参数不想支持拖动，怎么处理？

draggable插件是有属性可以设置不可拖动的。就是——filter
比如要将枚举列表中的【测试】一项设置为不可拖动的，则可以设置如下：

<draggable@start.stop="dragStart"@end.stop="dragEnd"filter=".unDrag"@update.stop="onUpdate"
><transition-group type="transition" name="field_list"><a-checkboxv-for="item1 in 枚举列表":key="item1":value="item1":class="[item1=='测试' ? 'unDrag' : '',]"style="min-width: 100px">{{ item1 }}</a-checkbox></transition-group>
</draggable>