Vue.js 移动端实现div拖拽移动是一个常见的交互需求，尤其在开发移动应用或页面时，例如创建可拖动的悬浮窗口。本教程将详细讲解如何利用Vue.js框架来实现这一功能，主要涉及的事件处理包括触摸开始(`touchstart`)、触摸移动(`touchmove`)和触摸结束(`touchend`)，以及它们对应的PC端事件`mousedown`、`mousemove`和`mouseup`。
我们需要理解这些事件的作用：
1. `touchstart`: 当用户在触摸屏上按下手指时触发。
2. `touchmove`: 当用户在屏幕上移动手指时触发。
3. `touchend`: 当用户在屏幕上抬起手指时，该事件会被触发。
4. `touchcancel`: 在某些情况下，如电话接入或弹出信息，系统可能会取消当前的触摸操作，这时会触发`touchcancel`事件，通常用于暂停或保存游戏状态。
在实现过程中，我们通常会遇到一个常见问题，即拖动操作与页面滚动冲突。为了解决这个问题，我们可以监听`touchmove`事件，并阻止其默认行为，这样可以防止页面滚动。代码中使用`event.preventDefault()`来实现这一目的。
接下来，我们来看一下实现的步骤：
（一）HTML结构：
HTML模板应该包含两个div元素，一个是正常的网页内容，另一个是需要拖动的悬浮div。确保悬浮div具有合适的定位属性（如`position:fixed`），并设置一个较高的`z-index`值以确保它在其他元素之上。
```html
<template>
<div id="webId">
<div>你的web页面</div>
<div v-if="!isShow" class="xuanfu" id="moveDiv"
@mousedown="down" @touchstart="down"
@mousemove="move" @touchmove="move"
@mouseup="end" @touchend="end">
<div class="yuanqiu">{{pageInfo.totalPage}}</div>
</div>
</div>
</template>
```
（二）JavaScript (JS) 部分：
在Vue组件的`data`选项中定义必要的变量，如初始位置、移动坐标和状态标志。`methods`部分包含了处理拖动事件的函数：`down`、`move` 和 `end`。在`down`方法中记录初始位置，`move`方法计算新的坐标并更新样式，`end`方法则关闭拖动状态。
```javascript
<script>
export default {
data() {
return {
flags: false,
position: { x: 0, y: 0 },
nx: '',
ny: '',
dx: '',
dy: '',
xPum: '',
yPum: '',
};
},
methods: {
down() {
this.flags = true;
const touch = event.touches ? event.touches[0] : event;
this.position.x = touch.clientX;
this.position.y = touch.clientY;
this.dx = document.getElementById('moveDiv').offsetLeft;
this.dy = document.getElementById('moveDiv').offsetTop;
},
move() {
if (this.flags) {
const touch = event.touches ? event.touches[0] : event;
this.nx = touch.clientX - this.position.x;
this.ny = touch.clientY - this.position.y;
this.xPum = this.dx + this.nx;
this.yPum = this.dy + this.ny;
document.getElementById('moveDiv').style.left = this.xPum + "px";
document.getElementById('moveDiv').style.top = this.yPum + "px";
document.addEventListener("touchmove", function() {
event.preventDefault();
}, false);
}
},
end() {
this.flags = false;
},
},
};
</script>
```
（三）CSS 样式：
确保悬浮div有正确的布局和定位。例如，设置固定定位(`position: fixed`)，以及适当的`z-index`以确保它在其他元素之上。还可以添加一些过渡效果以增强用户体验。
```css
<style>
.xuanfu {
height: 4.5rem;
width: 4.5rem;
z-index: 999;
position: fixed;
top: 4.2rem;
right: 1.5rem;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.yuanqiu {
text-align: center;
line-height: 4.5rem;
font-size: 1.6rem;
color: #333;
}
</style>
```
通过以上步骤，你可以在Vue.js移动端实现div的拖拽移动功能，模拟类似iPhone悬浮窗的效果。请注意，这个示例代码可能需要根据实际项目需求进行调整，比如处理不同设备的兼容性问题，以及优化触摸事件的性能。
