H5 模块悬浮拖动效果

问题：在移动端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>

参考资料：javascript实现移动端上的触屏拖拽功能