draggable插件——实现元素的拖动排序——拖动和不可拖动的两种情况处理
最近在写后台管理系统的时候,遇到一个需求,就是关于拖动排序的功能。
我之前是写过一个关于拖动表格的功能,此功能可以实现表格中的每一行数据上下拖动实现排序的效果。
vue——实现表格的拖拽排序功能——技能提升
但是目前我这边的需求是实现属性的拖动,直接上图:
比如上图,我要拖动【管制卡号】到【客供】的后面
话不多说,直接上代码:
解决步骤1:安装vuedraggable
插件
npm install vuedraggable@2.24.3 //我这边安装的是这个版本,你也可以直接安装最新版本的,就是不指定版本号就是最新版本了
解决步骤2:局部页面使用
组件引入
import draggable from 'vuedraggable';
组件中的注册
components: { draggable },
效果图中左侧属性的渲染:
this.枚举列表 = ['测试','样板/批量','新单/返单']
<a-checkbox-group
v-model="canDragArr"
>
<draggable
@start.stop="dragStart"
@end.stop="dragEnd"
@update.stop="onUpdate"
>
<transition-group type="transition" name="field_list">
<a-checkbox
v-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-checkbox
v-for="item1 in 枚举列表"
:key="item1"
:value="item1"
:class="[
item1=='测试' ? 'unDrag' : '',
]"
style="min-width: 100px"
>{{ item1 }}</a-checkbox
>
</transition-group>
</draggable>
但是这样就有一个问题,【测试】属性不可拖动了,但是其他的属性可以拖动到【测试】的前后,这样也不是我们想要的。
我们想要的效果是下面的这种:
所以最后我的处理办法是,将枚举列表分为可拖动和不可拖动两种。
完成!!!多多积累,多多收获!!!