当前位置:网站首页>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
边栏推荐
- [BMZCTF-pwn] ectf-2014 seddit
- Inclusion exclusion principle acwing 890 Divisible number
- 时间很快,请多做有意义的事情
- Suppose a bank's ATM machine, which allows users to deposit and withdraw money. Now there is 200 yuan in an account, and both user a and user B have the right to deposit and withdraw money from this a
- Game theory acwing 894 Split Nim game
- [leetcode] day94 reshape matrix
- Usage scenarios of golang context
- 1.15 - input and output system
- 20220213-CTF MISC-a_ good_ Idea (use of stegsolve tool) -2017_ Dating_ in_ Singapore
- 11-gorm-v2-02-create data
猜你喜欢
[2021]GIRAFFE: Representing Scenes as Compositional Generative Neural Feature Fields
Leetcode-6110: number of incremental paths in the grid graph
vsCode创建自己的代码模板
20220213-CTF MISC-a_ good_ Idea (use of stegsolve tool) -2017_ Dating_ in_ Singapore
MySQL advanced part 1: stored procedures and functions
MySQL advanced part 2: the use of indexes
Gauss Cancellation acwing 884. Solution d'un système d'équations Xor linéaires par élimination gaussienne
4. Oracle redo log file management
论文阅读报告
博弈论 AcWing 891. Nim游戏
随机推荐
Design specification for mobile folding screen
11-gorm-v2-03-basic query
阿里新成员「瓴羊」正式亮相,由阿里副总裁朋新宇带队,集结多个核心部门技术团队
Leetcode-9: palindromes
Idea debug failed
Sum of three terms (construction)
Leetcode-6109: number of people who know secrets
Daily question 1189 Maximum number of "balloons"
MySQL advanced part 1: stored procedures and functions
Game theory acwing 893 Set Nim game
4. Object mapping Mapster
Game theory acwing 891 Nim games
中国剩余定理 AcWing 204. 表达整数的奇怪方式
2022-5-第四周日报
Regulations for network security events of vocational group in 2022 Guizhou Vocational College skill competition
MySQL advanced part 2: SQL optimization
Simple selection sort of selection sort
在新线程中使用Handler
阿里巴巴成立企业数智服务公司“瓴羊”,聚焦企业数字化增长
Modnet matting model reproduction