解决思路:
- 记录鼠标按下时和鼠标抬起时对应的坐标(pageX 和 pageY)
- 通过开方将按下时位置与抬起时位置进行比对,当值等于0或者小于7时证明当前为点击事件,反之则是拖拽事件
- 对应的点击事件写在抬起鼠标函数的判断逻辑中即可
1.创建页面浮窗并在初始化时固定位置
//创建 div,并添加按下鼠标事件与抬起鼠标事件
<div v-show="showCallCenter" class="call-center" @mousedown="move" @mouseup="moveEnd" ref="callCenter">
<i class="el-icon-phone-outline"></i>
</div>
// 将div设置为圆形浮窗样式
.call-center {
color: #000;
// 设置div大小
width: 60px;
height: 60px;
// 设置div位置与变为圆形
top: 8%;
right: 2%;
border-radius: 50%;
// 设为浮动并置于最顶层
position: fixed;
z-index: 99999;
text-align: center;
background: #eeeeee;
border: 3px solid rgb(216, 194, 194);
i {
display: block;
font-size: 32px;
margin-top: 16px;
color: #606266;
transition: color 0.15s linear;
}
}
![](https://img.haomeiwen.com/i25773466/c51294c69223607e.png)
2.初始化坐标变量
data() {
return {
// 按下时的坐标
startX: '',
startY: '',
// 抬起时的坐标
endX: '',
endY: '',
}
3.添加鼠标按下方法
methods: {
// 拖动窗口,鼠标按下
move(event) {
// 给对应div添加拖拽属性
let callCenter = this.$refs.callCenter
callCenter.style.cursor = 'move'
var distanceX = event.clientX - callCenter.offsetLeft
var distanceY = event.clientY - callCenter.offsetTop
// 获取按下时对应的坐标
this.startX = event.pageX
this.startY = event.pageY
document.onmousemove = function (ev) {
var oevent = ev || event
// 加入判断,让浮窗在限定的页面内可拖动
if (ev.clientX < 40 || ev.clientX > document.body.clientWidth - 30) {
return
}
if (ev.clientY < 40 || ev.clientY > document.body.clientHeight - 30) {
return
}
callCenter.style.left = oevent.clientX - distanceX + 'px'
callCenter.style.top = oevent.clientY - distanceY + 'px'
}
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
callCenter.style.cursor = 'default'
}
},
}
4.添加鼠标抬起方法
methods: {
// 鼠标抬起触发
moveEnd(event) {
// 获取鼠标抬起时的坐标
this.endX = event.pageX
this.endY = event.pageY
// 计算按下与抬起位置差值
var d = Math.sqrt((this.startX - this.endX) * (this.startX - this.endX) + (this.startY - this.endY) * (this.startY - this.endY))
if (d === 0 || d < 7) {
console.log("执行了点击事件")
}else {
console.log("执行了拖拽事件")
}
},
}
网友评论