vue實現移動端觸屏拖拽功能
阿新 • • 發佈:2020-08-23
vue實現移動端可拖拽浮球,供大家參考,具體內容如下
1 首先建立一個div
<div class="floatball" id="floatball" @mousedown="down" @touchstart.stop="down" @mousemove="move" @touchmove.stop="move" @mouseup="end" @touchend.stop="end" @click="showRewardDesc" :style="{top:position.y+'px',left:position.x+'px'}"> 獎勵規則 </div>
2 給 div 附上樣式
<style> .floatball{ color:white; height:50px; width: 50px; padding: 5px; z-index: 990; position: fixed; top: 60px; right: 320px; border-radius: 50%; background-color: rgba(29,157,237,0.8); } </style>
3 給 div 附上事件
準備四個變數
1)、螢幕長
var screenHeight = window.screen.height
2)、螢幕寬
var screenWidth = window.screen.width
3)、初始觸控點 距離 div 左上角的橫向距離 dx
4)、初始觸控點 距離 div 左上角的豎向距離 dy
在開始拖拽時,計算出滑鼠點(初始觸控點)和 div左上角頂點的距離
down(event){ this.flags = true; var touch ; if(event.touches){ touch = event.touches[0]; }else { touch = event; } console.log('滑鼠點所在位置',touch.clientX,touch.clientY) console.log('div左上角位置',event.target.offsetTop,event.target.offsetLeft) dx = touch.clientX - event.target.offsetLeft dy = touch.clientY - event.target.offsetTop },
拖拽進行時,將觸控點的位置賦值給 div
// 定位滑塊的位置 this.position.x = touch.clientX - dx; this.position.y = touch.clientY - dy;
// 限制滑塊超出頁面 // console.log('螢幕大小',screenWidth,screenHeight) if (this.position.x < 0) { this.position.x = 0 } else if (this.position.x > screenWidth - touch.target.clientWidth) { this.position.x = screenWidth - touch.target.clientWidth } if (this.position.y < 0) { this.position.y = 0 } else if (this.position.y > screenHeight - touch.target.clientHeight) { this.position.y = screenHeight - touch.target.clientHeight }
拖拽結束
//滑鼠釋放時候的函式 end(){ console.log('end') this.flags = false; },
全部程式碼
<template> <div class="floatball" id="floatball" @mousedown="down" @touchstart.stop="down" @mousemove="move" @touchmove.stop="move" @mouseup="end" @touchend.stop="end" :style="{top:position.y+'px',left:position.x+'px'}"> 獎勵規則 </div> </template> <script> // 滑鼠位置和div的左上角位置 差值 var dx,dy var screenWidth = window.screen.width var screenHeight = window.screen.height export default { data() { return { flags: false,position: { x: 320,y: 60 },} },methods: { // 實現移動端拖拽 down(event){ this.flags = true; var touch ; if(event.touches){ touch = event.touches[0]; }else { touch = event; } console.log('滑鼠點所在位置',touch.clientY) console.log('div左上角位置',event.target.offsetLeft) dx = touch.clientX - event.target.offsetLeft dy = touch.clientY - event.target.offsetTop },move() { if (this.flags) { var touch ; if (event.touches) { touch = event.touches[0]; } else { touch = event; } // 定位滑塊的位置 this.position.x = touch.clientX - dx; this.position.y = touch.clientY - dy; // 限制滑塊超出頁面 // console.log('螢幕大小',screenHeight ) if (this.position.x < 0) { this.position.x = 0 } else if (this.position.x > screenWidth - touch.target.clientWidth) { this.position.x = screenWidth - touch.target.clientWidth } if (this.position.y < 0) { this.position.y = 0 } else if (this.position.y > screenHeight - touch.target.clientHeight) { this.position.y = screenHeight - touch.target.clientHeight } //阻止頁面的滑動預設事件 document.addEventListener("touchmove",function(){ event.preventDefault(); },false); } },//滑鼠釋放時候的函式 end(){ console.log('end') this.flags = false; },} } </script> <style> .floatball{ color:white; height:50px; width: 50px; padding: 5px; z-index: 990; position: fixed; top: 60px; right: 320px; border-radius: 50%; background-color: rgba(29,0.8); } </style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。