Vue拖拽组件实战-优快云博客

Vue拖拽组件

vue开发公众号项目，***产品需要添加一个新的功能。拖拽功能。一听简单。百度上轮子挺多，直接拉一个过来用着就行。然鹅。。。兴奋之余，却失望至极。东西很多，没有一个能使得。你让我失望，那我就让你绝望。于是，拖拽的故事就开始了。。

vue拖拽功能组件源码

vue拖拽功能

必备知识点：

先给不懂的童鞋补充下流程，文章要细读方能拖动元素到你心里~

按下的时候，我们需要获取

元素当前的 具有相对定位元素的左侧距离

元素当前的具有相对定位元素的顶部距离

鼠标按下点的x轴距离（鼠标左侧的距离）

鼠标按下点的y轴距离（鼠标顶部的距离）

获取到这些点，先存储起来，后面的计算需要用到这些值

  start(e){
      // 如果touches存在就说明是移动端
      // 否则为pc端直接获取事件源对象
      let touch = e.touches? e.touches[0] : e;
      this.position.x = touch.clientX;
      this.position.y = touch.clientY;
      this.dx = moveDiv.offsetLeft;
      this.dy = moveDiv.offsetTop;
  }

Step1.

让元素跟着鼠标的移动不断移动。既然鼠标的x轴和y轴可以获取到，那我们就可以通过计算来让元素实现移动。

移动的时候，我们需要获取并设置

鼠标此时的当前的x轴和y轴的距离

鼠标点击的x轴和y轴的距离(按下的时候定义过)

此时用移动的距离 - 点击的起始位置就是移动的距离。

赋值给点击元素的left和top即可。

补充：计算的方式很多种，这知识其中一种

  move(e){
      let touch = e.touches? e.touches[0] : e;
      this.nx