H5 module suspension drag effect

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