vue 拖拽产生连线_基于Vue 撸一个指令实现拖拽功能

之前撸了一个copy 指令，这次再撸一个拖拽指令。。

具体是个什么蛇皮玩意儿呢，大概就像介样：

emmm。。没错，看起来就是如此的鸡肋，但是莫得办法，大佬喜欢啊。

由于我们项目中用的是 element-ui ，所有这个指令只针对 element-ui 的对话框组件哈，如果你们用的别的 ui 库也有这个需求的，涂涂改改应该也能用。。

其实这个拖拽的原理还是很简单的：

1.首先鼠标按下( onmousedown )

记录目标元素当前的 left 和 top 值

2.鼠标移动( onmousemove )

计算每次移动的横向距离 ( disX ) 和纵向距离 ( disY )

并改变元素的 left ( left = left + disX )和 top ( top = top + disY )值

3.鼠标松开( onmouseup )

完成一次拖拽，做一些收尾工作

left 和 top 值容易获取，关键是 disX 和 disY 怎么计算呢？

容我先普及一哈：

clientX ：表示鼠标当前的 X 坐标

clientY ：表示鼠标当前的 Y 坐标

那么伪代码就是：

disX = 鼠标按下时的 clientX - 鼠标松开