vue.draggable拖拽与点击冲突解决方案,兼容安卓与15版本iOS

在用这个插件的时候有遇到不少将点击事件当成是拖拽事件,并且使用.stop.prevent也无法阻止的情况,其中个人认为方法二最有效.

• 方法一:添加delay="1",这个功能是鼠标按下后多久可以拖拽,主要针对部分安卓机.
• 方法二::fallbackTolerance="3",拖拽之前应该移动的px,主要针对新版本iOS
• 方法三:将需要拖拽的内容写成组件,点击时通过$emit告诉父组件并处理业务.

 <Draggable
          v-model="selectedList"
          @change="changeSelectedList"
          handle=".selectDataEach"
          :delay="1"
          :fallbackTolerance="3"
        >
          <transition-group tag="div" class="flex_items_center warp">
            <template v-for="(selectItem, selectIndex) in selectedList">
              <SelectDataEach
                :key="'selectedList' + selectIndex"
                @delect="deleteSelectItem(selectItem.reportType, selectIndex)"
              >
                {
   
   { selectItem.reportTitle }}
              </SelectDataEach>
            </template>
          </transition-group>
        </Draggable>

<template>
  <div>
    <div class="radius_10 fff selectDataEach" @click.stop.prevent="handleSeletct">
      <slot />
      <i><img src="@/assets/images/dataCenter/delete.png" alt="" /></i>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleSeletct() {
      this.$emit("delect");
    },
  },
};