vue:使用jsPlumb实现连续题:支持滑动连线和点击连线

前言

最近在做一个互动题板管理项目,主要负责开发互动题板的连线题,由于时间紧凑,一番search之后决定使用jsPlumb来做,本身jsPlumb做的是可以滑动连线的,奈何产品要同时兼容点击,我想做过拖拽的前端小伙伴知道,拖拽和点击两者是有冲突问题; 拖拽比点击多了个move的操作,所有我们可以通过鼠标按下和抬起的位置来区分是否点击或者是拖拽,

思路:① 记录鼠标按下mousedown和鼠标抬起mouseup的时候当前的pageX和pageY,② 通过开方将两个位置坐标进行对比,当值等于0或者小于10的时候证明当前是点击事件,反之则是拖拽事件

实现

下载依赖:
npm install jsplumb --save`
代码








vue:使用jsPlumb实现连续题:支持滑动连线和点击连线_第1张图片

实现其实很简单,主要看document.addEventListener("mouseup", this.mock); 和 mouseDown方法。

学无止境~

你可能感兴趣的:(vue:使用jsPlumb实现连续题:支持滑动连线和点击连线)