vue.draggable实现el-tag标签可新增、拖拽及排序，并且已保存的tag不支持拖拽

本文链接：https://blog.csdn.net/Cici__zc/article/details/130887113

实现效果：

在这里插入图片描述

实现过程

安装 npm i -S vuedraggable
在需要使用的文件页面导入vuedraggable组件组件使用的三步骤：

a.引入 import draggable from 'vuedraggable'
b.注册 components: {draggable}
c.使用

使用

<el-form-item label="已选事件组">
  <div v-if="showContent">
    <draggable
      v-model="selectedEventItems[showContent - 1].events"
      :disabled="queryMode === 'check'"
    >
      <span
        style="margin: 0 5px 0 0"
        v-for="(item, index) in selectedEventItems[showContent - 1].events"
        :key="item.id"
      >
        <el-tag
          :closable="queryMode !== 'check'"
          :disable-transitions="false"
          @close="handleClose(item, index)"
          :type="showContent === 1 ? 'success' : showContent === 2 ? 'warning' : 'danger'"
        >
          {{ index + 1 }}. {{ item.groupName || item.eventGroupName }}
        </el-tag>
      </span>
    </draggable>
  </div>
</el-form-item>

已保存的tag不支持拖拽

在这里插入图片描述

首先从详情接口里获取 ’已选事件组‘ 的数组，询问后端确认哪个值可以用来区分是否是新增的，这个值一般是 id。然后遍历这个数组获取这些id，得到一个这样的id数据数组：[12，89，26，75]。这是从详情接口里获取的数据。也就是 differFun 方法。
然后，使用官方提供的filter属性，和 onMove 事件，根据vue的双向绑定规则，如果新增的id不在详情接口里获取的id数组里，就支持拖动和删除，否则不支持，并且这些支持的tag不能移动到已保存tag的前面，只允许从后面添加并移动。

官方文档提供了一个 onMove 事件和一个 filter 属性：

在这里插入图片描述

:filter=“.unmover” 设置了unmover样式的元素不允许拖动

<el-form-item label="已选事件组">
  <div v-if="showContent">
    <draggable
      v-model="selectedEventItems[showContent - 1].events"
      :filter="'.unmover'"
      :move="onMove"
    >
      <span
        style="margin: 0 5px 0 0"
        v-for="(item, index) in selectedEventItems[showContent - 1].events"
        :key="item.id"
        :class="['item', { unmover: differFun(item) }]"
      >
        <el-tag
          :closable="
            queryMode !== 'check' && !eventGroupIdDetailTemp.includes(item.eventGroupId)
          "
          :disable-transitions="false"
          @close="handleClose(item, index)"
          :type="showContent === 1 ? 'success' : showContent === 2 ? 'warning' : 'danger'"
        >
          {{ index + 1 }}. {{ item.groupName || item.eventGroupName }}
        </el-tag>
      </span>
    </draggable>
  </div>
</el-form-item>

differFun(item) {
 // TODO 待确认：根据哪个值区分是否新增  -> id
  return this.eventIdDetailTemp.includes(item.id);
},
onMove(e) {
  return !this.eventIdDetailTemp.includes(e.relatedContext.element.id);
},
---------------------------
// 获取详情id数组
this.eventGroupIdDetailTemp = data.roomEventGroups.map((i) => i.eventGroupId);