移动端元素跟随移动-防苹果悬浮球效果（转载）

最新推荐文章于 2024-05-22 16:44:15 发布

bluelotos893

最新推荐文章于 2024-05-22 16:44:15 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript 前端开发

JavaScript 同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

前端开发

25 篇文章 0 订阅

订阅专栏

非常感谢原作者的分享，毕竟自己折腾了快一天还是有很多问题，感觉主要就卡在了事件对象的获取上和兼容性的问题；第一段代码是我自己的，在页面没有滚动条的情况下没问题，有滚动条时就出现Bug了；

    //这个函数的目的是实现长按时才执行元素移动，我刚开始的逻辑是长按时移动悬浮球，点击时出现弹框
    $.fn.longPress = function(fn) {
        var timeout = undefined;
        var $this = this;
        for(var i = 0;i<$this.length;i++){
            $this[i].addEventListener('touchstart', function(event) {
                timeout = setTimeout(fn, 800);  //长按时间超过800ms，则执行传入的方法
                }, false);
            $this[i].addEventListener('touchend', function(event) {
                clearTimeout(timeout);  //长按时间少于800ms，不会执行传入的方法
                }, false);
        }
    }

    $("#moreDialog").longPress(function(){
      console.log("长按了屏幕");
      var deviceWidth = document.documentElement.clientWidth;
      var deviceHeight = document.documentElement.clientHeight;
      $("body").css({"overflow":"hidden"})
      var drag = document.getElementById('moreDialog2'),
      drag.addEventListener('touchmove', function(ev){                    
      console.log(ev)      
      var ev = ev || window.event;//这里出现了问题。。
      var _touch = ev.targetTouches[0];
    　 var _x= _touch.pageX - 35;
        var _y= _touch.pageY - 35;
        console.log(_x,_y)
         if(_x <= 0){
            _x = 0;
        }
        if(_x >= (deviceWidth-70)){
            _x = deviceWidth-70
        }
        if(_y <= 0){
            _y = 0;
        }
        if(_y >= (deviceHeight-70)){
            _y = deviceHeight-70
        } 
        $("#moreDialog").css({
            "left":_x + "px",
            "top":_y + "px"
        })
           /* drag.style.top=(ev.pageY-35)+'px';
           drag.style.left=(ev.pageX-35)+'px';
           endTouchX = ev.pageX; */
       },false)
        drag.addEventListener('touchend', function(ev){
        var deviceWidth = document.documentElement.clientWidth;
        var deviceHeight = document.documentElement.clientHeight;   
            //window.event? window.event.cancelBubble = true : ev.stopPropagation();

            $("body").css({"overflow":"auto"})
        },false)

});

折腾了半天，效果不好，应该说就是失败了，还好找到了下面这位分享的代码解决燃眉之急，大家可以借鉴下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!--设置viewport-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
    <title>移动端元素移动模仿悬浮球效果</title>
</head>
<style>
    body,html{
        margin: 0;
        padding: 0;
    }
    ol{
        margin: 0;
    }
    .div {
        width: 80px;
        height: 80px;
        position: fixed;
        z-index: 2;
        left: 78vw;
        top:20vh;
        background-color: rgb(129, 185, 231);
        border-radius: 50%;
    }
    li{
        line-height:30px;
    }
    #son{
        width:40px;
        height: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -20px;
        margin-left: -20px;
        background: #fff;
        opacity: 0.72;
        border-radius: 50%;
    }
</style>

<body>
    <div style="background:#c7e2bf;">
        <ol>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
            <li>每天进步一点点</li>
        </ol>
    </div>
    <div class="div" id="div">
        <div id="son"></div>
    </div>
</body>
<script>
    window.onload = function () {
        var flag = 0; //标记是拖曳还是点击
        var oDiv = document.getElementById("div");
        var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;
        oDiv.addEventListener("touchstart", function (e) {
            flag = 0;
            console.log("touchstart",e)
            e.preventDefault(); //阻止触摸时页面的滚动，缩放
            disX = e.touches[0].clientX - this.offsetLeft;
            disY = e.touches[0].clientY - this.offsetTop;
            //手指按下时的坐标
            starX = e.touches[0].clientX;
            starY = e.touches[0].clientY;
            //console.log(disX);
        });
        oDiv.addEventListener("touchmove", function (e) {
            flag = 1;
            console.log("touchmove",e)
            L = e.touches[0].clientX - disX;
            T = e.touches[0].clientY - disY;
            //移动时 当前位置与起始位置之间的差值
            starXEnd = e.touches[0].clientX - starX;
            starYEnd = e.touches[0].clientY - starY;
            //console.log(L);
            if (L < 0) { //限制拖拽的X范围，不能拖出屏幕
                L = 0;
            } else if (L > document.documentElement.clientWidth - this.offsetWidth) {
                L = document.documentElement.clientWidth - this.offsetWidth;
            }
            if (T < 0) { //限制拖拽的Y范围，不能拖出屏幕
                T = 0;
            } else if (T > document.documentElement.clientHeight - this.offsetHeight) {
                T = document.documentElement.clientHeight - this.offsetHeight;
            }
            moveX = L + "px";
            moveY = T + "px";
            //console.log(moveX);
            this.style.left = moveX;
            this.style.top = moveY;
        });
        oDiv.addEventListener("touchend", function (e) {
            //alert(parseInt(moveX))
            //判断滑动方向
            console.log("touchend",e)
            if (flag === 0) { //点击
                console.log("点击")
                //window.location.href = "http://www.baidu.com";
            }
        });


    }
</script>

</html>

以上转载至码迷网；因个人的业务需求不尽相同，需要自己更改一下，我需要移动和点击两个功能，引入了jQuery mobile 的事件模块，

    $("#moreDialog2").on("tap", function (e) {
       console.log("点击了")
       e.preventDefault();
       //这里放点击时的业务逻辑
   });

bluelotos893

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
移动端元素跟随移动-防苹果悬浮球效果（转载）

非常感谢原作者的分享，毕竟自己折腾了快一天还是有很多问题，感觉主要就卡在了事件对象的获取上和兼容性的问题；第一段代码是我自己的，在页面没有滚动条的情况下没问题，有滚动条时就出现Bug了； //这个函数的目的是实现长按时才执行元素移动，我刚开始的逻辑是长按时移动悬浮球，点击时出现弹框 $.fn.longPress = function(fn) { var timeout
复制链接

扫一扫