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

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

article 2025/3/5 4:49:23

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

我之前是写过一个关于拖动表格的功能，此功能可以实现表格中的每一行数据上下拖动实现排序的效果。
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>