浮动小窗
html部分
<template>
<img :style="{ top: top + 'px', left: left + 'px' }" ref="floating"
class="movable-bd"
@mousedown="down" @touchstart="down"
@mousemove="move" @touchmove="move"
@mouseup="end" @touchend="end"
src="/static/resource/home/map.png" />
</template>
css部分
.movable-bd {
z-index: 5;
position: absolute;
top: 70%;
right: 0;
height: 64px;
width: 64px;
border-radius: 32px;
overflow: hidden;
}
JavaScript部分
...
data () {
return {
......
/** 悬浮窗的相关配置 */
flags: false,
position: {
x: 0,
y: 0
},
nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
top: '',
left: '',
screenWidth: window.innerWidth,
screenHeight: window.innerHeight
......
}
},
method: {
/**
* 移动端拖动
*/
down (event) {
this.flags = true;
var touch ;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
this.position.x = touch.clientX;
this.position.y = touch.clientY;
this.dx = this.$refs.floating.getBoundingClientRect().left;
this.dy = this.$refs.floating.getBoundingClientRect().top;
document.addEventListener("touchmove",function(){
event.preventDefault();
},false);
},
/**
* 移动端拖动事件
*/
move (event) {
if(this.flags){
var touch;
if(event.touches){
touch = event.touches[0];
}else {
touch = 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;
if(this.yPum < 0) {this.yPum = 0}
if(this.xPum < 0) {this.xPum = 0}
let divWidth = this.$refs.floating.getBoundingClientRect().width;
let divHeight = this.$refs.floating.getBoundingClientRect().height;
if(this.xPum > (this.screenWidth - divWidth)) { this.xPum = this.screenWidth - divWidth; }
if(this.yPum > (this.screenHeight - divHeight - 60)) { this.yPum = this.screenHeight - divHeight - 60; }
this.top = this.yPum;
this.left = this.xPum;
document.addEventListener("touchmove",function(){
event.preventDefault();
},false);
}
},
/**
* 鼠标释放时候的函数
*/
end () {
this.flags = false;
}
}