vue-drag-resize, 拖动，长按，点击的事件判断

Vue drag resize - 轻量级，无依赖，可缩放

强是强，但是bug多，首先是不能点击与拖动共存

完美解决， 线上体验 [不知火批发]柑桔-不知火-果园直发价格美丽8229价格1元/斤 - 惠农网触屏版 (cnhnkj.cn)

用法

$ npm i -s vue-drag-resize

用这个可以做成拖动的效果，但是拖动与点击是重合的，你没法知道啥是点击，也就是点击是没法达到预期的，

上面的功能已经实现，但我使用了巧妙的方法

参照下面代码

vue在移动端，如何自已实现事件原理。

下面看看 移动端是怎么做的：点击、滑动、长按的事件判断原理如下

<template>
  <div class="about">
    <p @touchstart="start" @touchmove="move" @touchend="end">
      this is a picture
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      longClick: 0,
      timeOutEvent: 0
    };
  },
  methods: {
    start() {
      var that = this;
      this.longClick = 0;
      this.timeOutEvent = setTimeout(function() {
        that.longClick = 1;
        console.log("这是长按")
      }, 500);
    },
    move(e) {
      clearTimeout(this.timeOutEvent);
      this.timeOutEvent = 0;
      e.preventDefault();
      console.log("这是滑动")
    },
    end() {
      clearTimeout(this.timeOutEvent);
      if (this.timeOutEvent != 0 && this.longClick == 0) {
        //点击
        //此处为点击事件----在此处添加跳转详情页
        console.log("这是点击");
      }
      return false;
    }
  }
};
</script>

<vue-drag-resize content-class="container-douhuo" v-if="videoInfo" :isActive="true" :w="80" :h="110" :x="314" :y="112" :isResizable="false" :parentLimitation="true" dragCancel=".celdrag" @clicked="clickDouhuo" @dragging="dragDouhuo" @dragstop="detailDouhuo">


<script>
...

methods: {
    ...
    clickDouhuo() {
      this.longClick = 0
      this.drag = 0
      this.timeOutEvent = setTimeout(() => { this.longClick = 1 }, 500)
    },
    dragDouhuo() {
      clearTimeout(this.timeOutEvent)
      this.drag++ && (this.timeOutEvent = 0)
    },
    detailDouhuo() {
      if (this.timeOutEvent !== 0 && this.longClick === 0) {
        // 这里就是点击的事件触发
      }
    },
}
</script>

PS:上面不有只看事件的方法去理解

绑定三个方法,打套组合拳去处理

可以解决，作者估计没有想过这个问题，不过还好没有把路堵死

也是在看了源码，其实源码也很简单，不行可以偷去改

ssr报错

居然报 nuxt window is not defined

估计是ssr 不支持，但没想到，只要import VueDragResize from 'vue-drag-resize' 就报错，着实不能用吗，nuxt 有个plugin 引入，设置 ssr: false

可以解决

这是nuxt2里的调整

/src/plugins/dragResize.js

import Vue from 'vue'
import VueDragResize from 'vue-drag-resize';

Vue.component('vue-drag-resize', VueDragResize)

nuxt.config.js

    ...
    plugins: [
        {
            src: '~/plugins/dragResize',
            ssr: false
        }
    ],

完美解决， 线上体验 [土鸡蛋批发]土鸡蛋 粉蛋 绿壳鸡蛋 鸡厂直发破损包赔价格35元/盒 - 惠农网触屏版 (cnhnb.com)

欢迎大家一起沟通交流