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

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

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

但是目前我这边的需求是实现属性的拖动,直接上图:

比如上图,我要拖动【管制卡号】到【客供】的后面

话不多说,直接上代码:

解决步骤1:安装vuedraggable插件

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

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

组件引入

js 复制代码
import draggable from 'vuedraggable';

组件中的注册

js 复制代码
components: { draggable },

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

js 复制代码
<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】

对应的函数:

js 复制代码
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

比如要将枚举列表中的【测试】一项设置为不可拖动的,则可以设置如下:

js 复制代码
<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>

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

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

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

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

相关推荐
伍哥的传说25 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783827 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊38 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为