创建一个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>
这样拖拽组件就完成了,哪里需要引到哪里