vue 移动端简单拖拽
程序员文章站
2022-07-14 16:44:40
...
<template>
<div
ref="dragBox"
id="box"
@touchstart="touchstartHandle('dragBox', $event)"
@touchmove="touchmoveHandle('dragBox', $event)"
>
可拖拽元素
</div>
</template>
<script>
export default {
data() {
return {
coordinate: {
client: {},
elePosition: {},
},
};
},
methods: {
touchstartHandle(refName, e) {
let element = e.targetTouches[0];
// 记录点击的坐标
this.coordinate.client = {
x: element.clientX,
y: element.clientY,
};
// 记录需要移动的元素坐标
this.coordinate.elePosition.left = this.$refs[refName].offsetLeft;
this.coordinate.elePosition.top = this.$refs[refName].offsetTop;
},
touchmoveHandle(refName, e) {
let element = e.targetTouches[0];
// 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
let x =
this.coordinate.elePosition.left +
(element.clientX - this.coordinate.client.x);
let y =
this.coordinate.elePosition.top +
(element.clientY - this.coordinate.client.y);
// 限制可移动距离,不超出可视区域
x =
x <= 0
? 0
: x >= innerWidth - this.$refs[refName].offsetWidth
? innerWidth - this.$refs[refName].offsetWidth
: x;
y =
y <= 0
? 0
: y >= innerHeight - this.$refs[refName].offsetHeight
? innerHeight - this.$refs[refName].offsetHeight
: y;
// 移动当前元素
this.$refs[refName].style.left = x + "px";
this.$refs[refName].style.top = y + "px";
},
},
};
</script>
<style lang="scss" scoped>
#box {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
</style>
上一篇: Android-Handler发送消息
下一篇: Vue移动端实现元素拖拽移动