vue 移动端 拖拽

创建一个div，因为是移动端的，所以用touchmove事件，触发一个函数。

<template>
  <div>
      <div class="active" id="active" :style="{top:top,left:left}" @click="onClick" @touchmove="onmove" >
          <span class="iconfont icon-youjianduanxin"></span>
      </div>
  </div>
</template>

上边div里有一个动态绑定的style样式，是因为给这个div加了定位，之后需要动态设置坐标，为了简单所以使用。
这样就需要在data中定义一个 X轴（left）,Y轴（top）初始化的一个位置。

 data: function() {
    return {
        left:"330px",
        top:"300px"
    };
  }

同时上边绑定了一个移动事件触发的函数是onmove,就需要在method中定义一个函数

onmove(event){
        //通过console.log可以查找到在event中的touches里有一个下标为零的地方里有x轴和y轴的坐标
        // console.log(event.touches[0].clientX)
        // console.log(event.touches[0].clientY)
        //阻止默认事件，如果不添加，拖动时，内容会跟着跑。
        event.preventDefault();
         //拿到坐标
        let X=event.touches[0].clientX;
        let Y=event.touches[0].clientY;
        //这个减35是因为我的那个div设置的高度是70为了取中心点，所以X轴和Y轴各减35
        let num=X-35;
        let num2=Y-35;
        //再给data中的属性赋值，这样就会让拖拽的元素跟着跑了。
        this.left=num+"px";
        this.top=num2+"px";
    }

样式

<style scoped>
/* @import url(); 引入css类 */
.active
{
    width:70px;
    height:70px;
    background-color: #007AFF;
    border-radius:50%;
    text-align: center;
    line-height: 70px;
    position: fixed;
}
.iconfont 
{
    font-size: 30px;
    color:#fff;
}
</style>

这样拖拽组件就完成了，哪里需要引到哪里