vue-drag-resize区分点击和拖动事件

一、前言

vue-drag-resize插件实现职场布局图设计时，需要满足单击作为显示资产详细信息，拖动调整位置，目前发现拖动时点击事件也会触发，导致拖动时，资产详细信息被弹出。

          v-for="(item, index) in list"
          :key="item.id"
          :is-draggable="canDrag ? true : false"
          :is-active="true"
          :w="Number(item.planWidth)"
          :h="Number(item.planLength)"
          :y="Number(item.planMarginTop)"
          :x="Number(item.planMarginLeft)"
          :style="`transform:rotate(${item.planSpin}deg);`"
          :minw="2"
          :minh="2"
          :is-resizable="false"
          :snap-to-grid="false"
          class="drag"
          :parent="true"
          :class="[
            item.planType == '12' ||item.planType == '14' || item.planType == '8' ? 'activitys' : '',
          ]"
          @dragging="resize($event, index)"
          @dragstop="dragstop(item, index, $event)"
          @clicked="handleClick(item, index,$event)"
        ></VueDragResize>

二、解决

使用mousedown和mouseup

<VueDragResize
  v-for="(item, index) in list"
  :key="item.id"
  :is-draggable="canDrag ? true : false"
  :is-active="true"
  :w="Number(item.planWidth)"
  :h="Number(item.planLength)"
  :y="Number(item.planMarginTop)"
  :x="Number(item.planMarginLeft)"
  :style="`transform:rotate(${item.planSpin}deg);`"
  :minw="2"
  :minh="2"
  :is-resizable="false"
  :snap-to-grid="false"
  class="drag"
  :parent="true"
  :class="[
    item.planType == '12' ||item.planType == '14' || item.planType == '8' ? 'activitys' : '',
  ]"
  @dragging="resize($event, index)"
  @dragstop="dragstop(item, index, $event)"
  @mousedown.native="StartDrag(item, index, $event)"
  @mouseup.native="StopDrag(item, index, $event)">
</VueDragResize>

resize(newRect, index) {
  this.isDragging = true  // 标记是否拖动
  // 处理逻辑
},
StartDrag(item, index, ev){
  this.isDragging = false // 鼠标按下初始拖动状态
  this.startX = ev.clientX
  this.startY = ev.clientY
},
// 鼠标松开
StopDrag(item, index, ev){
  const x = ev.clientX - this.startX
  const y = ev.clientY - this.startY
  if (Math.abs(x) > 0 || Math.abs(y) > 0) {
    // 处理移动逻辑
    this.isDragging = true
  }else{
    this.isDragging = false
    // 不是拖动则触发点击事件
    this.popoverClickShow(item, index)
  }
},
dragstop(item, index, $event) {
  this.isDragging = false
  // 处理逻辑
}