当前位置: 首页 > article >正文

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>

但是这样就有一个问题,【测试】属性不可拖动了,但是其他的属性可以拖动到【测试】的前后,这样也不是我们想要的。

我们想要的效果是下面的这种:

在这里插入图片描述

所以最后我的处理办法是,将枚举列表分为可拖动和不可拖动两种。

完成!!!多多积累,多多收获!!!


http://www.kler.cn/a/427843.html

相关文章:

  • 第一节、电路连接【51单片机-TB6600驱动器-步进电机教程】
  • Java课程设计项目-servlet+jsp美食系统、菜品管理系统
  • 数据结构代码归纳
  • THENA大涨将对整个DeFi市场产生怎样的影响?
  • QT 左右 上下,拉伸 分配窗口大小
  • [Python | CS基础 ]Python多线程`threading`和多进程`multiprocessing`
  • 相机动态/在线标定
  • 【深度学习】分类问题代码实战之初始手写数据集
  • Qt复习学习
  • ASP.NET Core SignalR 入门
  • FastAPI中创建一个多App架构
  • 超详细!关于在Docker里安装Hadoop的详细操作(部署单点集群)
  • Python 中的魔法方法有哪些?
  • el-table expand-row-keys默认展开,数据更新后默认展开的问题
  • 如何使用apache部署若依前后端分离项目
  • AWS Fargate + Cloud Map + Prometheus 实现 JVM 监控方案详解
  • 控制访问权限
  • 【QT】一个简单的串口通信小工具(QSerialPort实现)
  • C/C++基础知识复习(40)
  • 响应式布局:登录界面