vuedraggable 在移动端与 click 事件冲突的问题

解决思路：巧妙使用 onTouchStart 以及 vuedraggable 暴露出来的start、end事件

先看一下要实现的效果图

每个可拖动的item里面有图片还有一个可以关闭的icon，可以进行的操作是：点击图片、点击关闭icon、拖动图片

关键逻辑

处理关闭icon

• 为icon加上 touchstart 时间，同时加上click事件对网页进行兼容，每次触发都进行标记

<i
  @touchstart="removeImage(index)"
  @click="handleRemove(index)"
></i>

// js部分
handleRemove (index) {
  this.$emit('removeImage', index)
},
removeImage (index) {
  this.isRmove = true
  this.removeIndex = index
},

判断是拖动还是点击

• 通过draggable暴露出来的start、end方法执行的时间差进行判断

<draggable
    v-model="currentImage"
    draggable=".picItem"
    class="flex"
    @start="onStart"
    @end="onEnd"
  >

// js部分
onStart () {
  this.diff = new Date().getTime()
},
onEnd (ele) {
  // 计算差值
  this.diff = new Date().getTime() - this.diff
  // 如果点击的过程小于200ms，说明是点击
  if (this.diff < 200) {
    // 说明点击的是关闭按钮
    if (this.isRmove) {
      this.isRmove = false
      setTimeout(() => {
        this.$emit('removeImage', this.removeIndex)
      }, 100); // 这儿延迟一下再处理，避免造成下一个item的误触
    } else {
      // 点击的是图片，进行预览
      ImagePreview({
        images: this.currentImage,
        startPosition: ele.oldIndex
      })
    }
    return
  }
}

下面是简化后的示例代码 传送门