实现可拖拽移动的悬浮按钮（FBA按钮）

实现可拖拽移动的悬浮按钮

不论在什么场景，最重要的是监听按钮的移动距离

以vue为例，如下：

<template>
    <div>
        <div v-show="isShow" class="back-btn" @click.stop="goback" ref="backDom">
        </div>
    </div>
</template>

在methods中定义如下方法，mounted中调用，

handlerDrag() {
                let dom = this.$refs.backDom
                //限制最大宽高，不让滑块出去
                let maxW = document.body.clientWidth - dom.offsetWidth
                let maxH = document.body.clientHeight - dom.offsetHeight
                let oL, oT
                //手指触摸开始，记录div的初始位置
                dom.addEventListener('touchstart', function(e) {
                    let ev = e || window.event
                    let touch = ev.targetTouches[0]
                    oL = touch.clientX - dom.offsetLeft
                    oT = touch.clientY - dom.offsetTop
                    document.addEventListener('touchmove', defaultEvent, false)
                })
                //触摸中的，位置记录
                dom.addEventListener('touchmove', function(e) {
                    let ev = e || window.event
                    let touch = ev.targetTouches[0]
                    let oLeft = touch.clientX - oL
                    let oTop = touch.clientY - oT
                    if(oLeft < 0) {
                        oLeft = 0
                    } else if(oLeft >= maxW) {
                        oLeft = maxW
                    }
                    if(oTop < 0) {
                        oTop = 0
                    } else if(oTop >= maxH) {
                        oTop = maxH
                    }
                    dom.style.left = oLeft + 'px'
                    dom.style.top = oTop + 'px'
                }, { passive: false })
                //触摸结束时的处理
                dom.addEventListener('touchend', function() {
                    document.removeEventListener('touchmove', defaultEvent)
                })
                //阻止默认事件
                function defaultEvent(e) {
                    e.preventDefault()
                }
            }

在应用中可能会出现的问题：

滑动时候警告[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

解决办法1：

在touch的事件监听方法上绑定第三个参数{ passive: false }，
通过传递 passive 为 false 来明确告诉浏览器：事件处理程序调用 preventDefault 来阻止默认滑动行为。

解决办法2：

 * { touch-action: pan-y; } 
 // 使用全局样式样式去掉