2021-04-01

实现一个可以拖拽的悬浮窗

// html
    <div class="revisitRefreshBtn" id="revisitRefreshBtn" ng-click="refreshDetail()"></div>

// css
 .revisitRefreshBtn{
    position:fixed;
    z-index: 9;
    width:42px;
    height:42px;
    border-radius: 50%;
    overflow: hidden;
    background: url("../images/refreshbtn.png") no-repeat center;
    background-size: 50px;
    bottom:30%;
    right:5%;
}

//js
 getTipsNewas: function () {
        var flag = false, nx, ny, dx, dy, x, y, cur = {
            x: 0,
            y: 0
        };

        function down(event) {
            flag = true;
            var touch;

            if (event.touches) {
                touch = event.touches[0];
            } else {
                touch = event;
            }
            cur.x = touch.clientX;
            cur.y = touch.clientY;
            dx = div2.offsetLeft;
            dy = div2.offsetTop;
        }

        function move(event) {
            if (flag) {
                var touch;

                if (event.touches) {
                    touch = event.touches[0];
                } else {
                    touch = event;
                }
                nx = touch.clientX - cur.x;
                ny = touch.clientY - cur.y;
                x = dx + nx;
                y = dy + ny;

                var clientWidth = document.body.clientWidth - 54,
                    clientHeight = document.body.clientHeight - 54;

                if (x >= clientWidth) {
                    x = clientWidth;
                }
                if (x <= 0) {
                    x = 0;
                }
                if (y <= 0) {
                    y = 0;
                }
                if (y >= clientHeight) {
                    y = clientHeight;
                }
                div2.style.left = x + 'px';
                div2.style.top = y + 'px';
                // 阻止页面的滑动默认事件
                document.addEventListener('touchmove', function () {
                    event.preventDefault();
                }, false);
            }
        }

        /**
     * 鼠标释放时候的函数
     * @returns {void}
     * */
        function end() {
            flag = false;
        }

        var me = this, el = me.el, div2 =  document.getElementById('revisitRefreshBtn');

        div2.addEventListener('mousedown', function (e) {
            down(e);
        }, false);
        div2.addEventListener('touchstart', function (e) {
            down(e);
        }, false);
        div2.addEventListener('mousemove', function (e) {
            move(e);
        }, false);
        div2.addEventListener('touchmove', function (e) {
            move(e);
        }, false);
        document.body.addEventListener('mouseup', function (e) {
            end(e);
        }, false);
        div2.addEventListener('touchend', function (e) {
            end(e);
        }, false);
    }