实现可移动悬浮按钮(微信小程序/H5移动端html)

标签：document 微信 oTop H5 height touch backToTop var 移动

微信小程序实现方案：

我们可以利用微信小程序的内置组件轻松实现！
1.将整个屏幕用movable-area组件覆盖，
2.在movable-area内部添加一个movable-view实现自由滑动。
3.重点：CSS属性 pointer-events 。
代码奉上：
wxml:

<movable-area class="movable-area">
    <movable-view class="movable-view" direction="all">点击</movable-view>
</movable-area>

wxss:

.movable-area{
	/* 这个属性设置为none,让所有事件穿透过去 */
    pointer-events:none;
    z-index: 100;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.movable-view{ 
	/* 重设为auto,覆盖父属性设置 */
	pointer-events:auto;
	height: 50px;
	width: 50px;
	background: rgba(0,0,0,.5);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}

H5移动端(html)实现方案：

 html:

<a href="#" id="backToTop" class="backToTop">拖我</a>
<div>ooo</div>
<div class="oo">999</div>

css:

* {
       margin: 0;
       padding: 0;
   }
   html,
   body {
       width: 100%;
       height: 100%;
   }
   #backToTop {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       border: 2px solid pink;
       position: fixed;   /*这里需要固定定位*/
       text-align: center;
       line-height: 50px;
       text-decoration: none;
       color: purple;
   }
   /*辅助测试*/
   div {
       width: 200px;
       height: 300px;
       background-color: deeppink;
   }
   .oo {
       width: 230px;
       height: 450px;
       background-color: deepblue;
   }

jsvascript:

var backToTop = document.getElementById("backToTop");
    //限制最大宽高，不让滑块出去
    var maxW = document.body.clientWidth - backToTop.offsetWidth;
    var maxH = document.body.clientHeight - backToTop.offsetHeight;

    backToTop.addEventListener('touchstart', touchStart,true);
    backToTop.addEventListener('touchmove', touchMove,true);
    backToTop.addEventListener('touchend', touchEnd,true);
    //1、手指触摸开始，记录div的初始位置
    function touchStart(e) {
        var ev = e || window.event;
        var touch = ev.targetTouches[0];
        oL = touch.clientX - backToTop.offsetLeft;
        oT = touch.clientY - backToTop.offsetTop;
        console.log('touch.clientX===',touch.clientX);
        console.log('oT===',oT);
        // document.addEventListener("touchmove", defaultEvent, false);
		// 拖动按钮时禁止滑动
        document.body.style.overflow = 'hidden';
    }
    //2、触摸过程，位置记录
    function touchMove(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 < 0) {
            oTop = 0;
        } else if (oTop >= maxH) {
            oTop = maxH;
        }
        backToTop.style.left = oLeft + 'px';
        backToTop.style.top = oTop + 'px';
        // 拖动按钮时禁止滑动
        document.body.style.overflow = 'hidden';
    }
    //3、触摸结束时的处理
    function touchEnd(e) {
        document.removeEventListener("touchmove", defaultEvent);
        console.log('e==>',e);
        // 结束拖动按钮时允许滑动
        document.body.style.overflow = 'auto';
    }
    //阻止默认事件
    function defaultEvent(e) {
        //e.defaultPrevented();   
        console.log('eee==>>',e);
    }

　　

标签：document,微信,oTop,H5,height,touch,backToTop,var,移动
From： https://www.cnblogs.com/btsn/p/17022068.html