vue實現懸浮按鈕可以隨處移動

1.html**

data() ,

nx: "",
ny: "",
dx: "",
dy: "",
xpum: "",
ypum: "",
};},

methods: ,

onrefresh() , 1000);
},down()  else 
this.position.x = touch.clientx;
this.position.y = touch.clienty;
this.dx = this.$refs.fu.offsetleft;
this.dy = this.$refs.fu.offsettop;
},move()  else 
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;
let width = window.innerwidth - this.$refs.fu.offsetwidth; //螢幕寬度減去自身控制項寬度
let height = window.innerheight - this.$refs.fu.offsetheight; //螢幕高度減去自身控制項高度
this.xpum < 0 && (this.xpum = 0);
this.ypum < 0 && (this.ypum = 0);
this.xpum > width && (this.xpum = width);
this.ypum > height && (this.ypum = height);
// if (this.xpum >= 0 && this.ypum >= 0 && this.xpum<= width &&this.ypum<= height) 
//阻止頁面的滑動預設事件
document.addeventlistener(
"touchmove",
function () ,
false);}
},//滑鼠釋放時候的函式
end() ,
onclick() ,
},

vue 側邊懸浮 vue實現移動端懸浮窗效果

本文講述，在使用vue的移動端實現類似於iphone的懸浮窗的效果。相關知識點 touchstart當在螢幕上按下手指時觸發 touchmove 當在螢幕上移動手指時觸發 touchend 當在螢幕上抬起手指時觸發 mousedown mousemove mouseup對應的是pc端的事件 touc...

vue 側邊懸浮 vue實現移動端懸浮窗效果

本文講述，在使用vue的移動端實現類似於iphone的懸浮窗的效果。相關知識點 touchstart當在螢幕上按下手指時觸發 touchmove 當在螢幕上移動手指時觸發 touchend 當在螢幕上抬起手指時觸發 mousedown mousemove mouseup對應的是pc端的事件 touc...

vue 側邊懸浮 vue實現移動端懸浮窗效果

本文講述，在使用vue的移動端實現類似於iphone的懸浮窗的效果。相關知識點 touchstart當在螢幕上按下手指時觸發 touchmove 當在螢幕上移動手指時觸發 touchend 當在螢幕上抬起手指時觸發 mousedown mousemove mouseup對應的是pc端的事件 touc...