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

vue.draggable中文文档

实现效果:

在这里插入图片描述

实现过程

  1. 安装 npm i -S vuedraggable

  2. 在需要使用的文件页面导入vuedraggable组件 组件使用的三步骤:

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

  1. 使用
<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);
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值