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.clientX,touch.clientY) console.log('div左上角位置', event.target.offsetTop,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('屏幕大小', 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 } //阻止页面的滑动默认事件 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, 157, 237,0.8); } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7