vuedraggable影响点击事件的解决办法

在工作中有很多场景需要针对广告、商品、信息推广等进行一个排序,或者对展示的顺序做出调整,方便放用户第一眼看到自己感兴趣的信息,因此避免不了需要用到排序的插件,这里以vue为例子,采用的插件是vuedraggable,这个插件针对于排序的功能相对完善,官网地址:vuedraggable官网
但是在移动端使用的时候经常会对排序的某些项进行编辑,这个时候针对编辑或者删除等操作点击事件会和拖拽事件造成冲突.
解决办法如下:
把需要拖拽的类名加入到handle属性 并且编辑和操作的class类名不要包含进去就可以了

<vuedraggable class="wrapper" v-model="list" :disabled="disabled" aghost-class="ghost" :handle="'.textI'">
  <transition-group>
    <div v-for="item in list" :key="item" class="item">
      <img class="imgPic" @click.stop="delItem" src="../assets/del.png" alt="">
      <p class="textI">{{item}}</p >
    </div>
  </transition-group>
  </vuedraggable>
1
2
3
4
5
6
7
8

这样就可以解决了