当前位置:网站首页>H5 module suspension drag effect
H5 module suspension drag effect
2022-07-05 06:26:00 【Heerey525】
problem : In mobile terminal H5 Suspending a module may block other contents , So you need to drag the suspended module .
programme : It's monitoring touch events ,( Absolute positioning ) Change the position of the module
Preview requires the browser to be in mobile mode
Code :
<template>
<div class="container">
<div class="floatBox" id="floatBox"></div>
</div>
</template>
<script>
export default {
name: 'touchMove',
data() {
return {
} },
mounted() {
this.touchMoveEvent()
},
methods: {
// The end consultation button allows dragging
touchMoveEvent() {
// Get elements
var div1 = document.getElementById('floatBox');
// var div1 = document.querySelector('#div1');
// Limit maximum width and height , Don't let the slider out
var maxW = document.body.clientWidth - div1.offsetWidth;
var maxH = document.body.clientHeight - div1.offsetHeight;
var oL, oT;
// Finger touch begins , Record div Initial position
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);
});
// In touch , Location record
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';
});
// Processing at the end of touch
div1.addEventListener('touchend', function() {
document.removeEventListener("touchmove", defaultEvent);
});
// Block default events
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>
Reference material :javascript Realize the touch screen drag function on the mobile terminal
边栏推荐
- Knapsack problem acwing 9 Group knapsack problem
- Install opencv -- CONDA to establish a virtual environment and add the kernel of this environment in jupyter
- LeetCode-54
- [wustctf2020] plain_ WP
- Gauss Cancellation acwing 884. Solution d'un système d'équations Xor linéaires par élimination gaussienne
- 阿里新成员「瓴羊」正式亮相,由阿里副总裁朋新宇带队,集结多个核心部门技术团队
- Relevant information of National Natural Science Foundation of China
- New title of module a of "PanYun Cup" secondary vocational network security skills competition
- [2021]IBRNet: Learning Multi-View Image-Based Rendering Qianqian
- June 29, 2022 daily
猜你喜欢
随机推荐
[2021]GIRAFFE: Representing Scenes as Compositional Generative Neural Feature Fields
Leetcode divide and conquer / dichotomy
Modnet matting model reproduction
7.Oracle-表结构
MySQL advanced part 1: index
ollvm编译出现的问题纪录
【高德地图POI踩坑】AMap.PlaceSearch无法使用
MQClientException: No route info of this topic: type_ topic
How to generate an image from text on fly at runtime
博弈论 AcWing 894. 拆分-Nim游戏
P3265 [jloi2015] equipment purchase
Currently clicked button and current mouse coordinates in QT judgment interface
[leetcode] day94 reshape matrix
Inclusion exclusion principle acwing 890 Divisible number
什么是套接字?Socket基本介绍
11-gorm-v2-02-create data
H5 模块悬浮拖动效果
[moviepy] unable to find a solution for exe
5.Oracle-表空间
MySQL advanced part 2: the use of indexes