当前位置:网站首页>H5 模块悬浮拖动效果
H5 模块悬浮拖动效果
2022-07-05 06:23:00 【Heerey525】
问题:在移动端H5悬浮一个模块可能会出现遮挡到别的内容的情况,所以需要将这个悬浮的模块可拖拽。
方案:就是监听触摸事件,(绝对定位)改变模块的位置
预览需要浏览器在手机模式下
代码:
<template>
<div class="container">
<div class="floatBox" id="floatBox"></div>
</div>
</template>
<script>
export default {
name: 'touchMove',
data() {
return {
} },
mounted() {
this.touchMoveEvent()
},
methods: {
// 结束咨询按钮允许拖拽
touchMoveEvent() {
//获取元素
var div1 = document.getElementById('floatBox');
// var div1 = document.querySelector('#div1');
//限制最大宽高,不让滑块出去
var maxW = document.body.clientWidth - div1.offsetWidth;
var maxH = document.body.clientHeight - div1.offsetHeight;
var oL, oT;
//手指触摸开始,记录div的初始位置
div1.addEventListener('touchstart', function(e) {
var ev = e || window.event;
var touch = ev.targetTouches[0];
oL = touch.clientX - div1.offsetLeft;
oT = touch.clientY - div1.offsetTop;
document.addEventListener("touchmove", defaultEvent, false);
});
//触摸中的,位置记录
div1.addEventListener('touchmove', function(e) {
var ev = e || window.event;
var touch = ev.targetTouches[0];
var oLeft = touch.clientX - oL;
var oTop = touch.clientY - oT;
if(oLeft < 0) {
oLeft = 0;
} else if(oLeft >= maxW) {
oLeft = maxW;
}
if(oTop < 75) {
oTop = 75;
} else if(oTop >= maxH - 75) {
oTop = maxH - 75;
}
div1.style.left = oLeft + 'px';
div1.style.top = oTop + 'px';
});
//触摸结束时的处理
div1.addEventListener('touchend', function() {
document.removeEventListener("touchmove", defaultEvent);
});
//阻止默认事件
function defaultEvent(e) {
e.preventDefault();
}
}
}
}
</script>
<style>
.container {
width: 100vw;
height: 100vh;
background: black
}
.floatBox {
width: 100%;
position: fixed;
bottom: 140px;
right: 2%;
width: 80px;
height: 80px;
z-index: 11;
touch-action: none;
background: red;
}
</style>
边栏推荐
- June 29, 2022 daily
- Chart. JS - Format Y axis - chart js - Formatting Y axis
- JS quickly converts JSON data into URL parameters
- MySQL advanced part 2: SQL optimization
- [2021]IBRNet: Learning Multi-View Image-Based Rendering Qianqian
- Network security skills competition in Secondary Vocational Schools -- a tutorial article on middleware penetration testing in Guangxi regional competition
- Golang uses context gracefully
- What is socket? Basic introduction to socket
- Leetcode-1200: minimum absolute difference
- MySQL advanced part 2: storage engine
猜你喜欢
随机推荐
Leetcode divide and conquer / dichotomy
Sorting out the latest Android interview points in 2022 to help you easily win the offer - attached is the summary of Android intermediate and advanced interview questions in 2022
Dataframe (1): introduction and creation of dataframe
C Primer Plus Chapter 15 (bit operation)
Game theory acwing 893 Set Nim game
What's wrong with this paragraph that doesn't work? (unresolved)
Alibaba's new member "Lingyang" officially appeared, led by Peng Xinyu, Alibaba's vice president, and assembled a number of core department technical teams
Applicable to Net free barcode API [off] - free barcode API for NET [closed]
Leetcode recursion
[rust notes] 16 input and output (Part 2)
Record the process of configuring nccl and horovod in these two days (original)
【LeetCode】Easy | 20. Valid parentheses
MySQL advanced part 2: SQL optimization
2022/6/29-日报
[2021]IBRNet: Learning Multi-View Image-Based Rendering Qianqian
Ffmpeg build download (including old version)
Bash exercise 17 writing scripts to install the server side of FRP reverse proxy software
安装OpenCV--conda建立虚拟环境并在jupyter中添加此环境的kernel
MySQL advanced part 1: index
How to make water ripple effect? This wave of water ripple effect pulls full of retro feeling