div跟随手指滑动

最新推荐文章于 2023-10-10 20:12:30 发布

weixin_30340775

最新推荐文章于 2023-10-10 20:12:30 发布

阅读量337

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xm16/p/10266820.html

follow(item)
function follow(target){
    //定位自动偏移问题在target元素再套一个父元素可解决
    var startx,starty,left_start,top_start,movex,movey,X,Y;
    var it = document.querySelector(".it");
    target.addEventListener("touchstart",fn) //手指触摸
    target.addEventListener("touchmove",fun) //手指持续滑动

    function fn(e){
        startx = e.touches[0].pageX;
        starty = e.touches[0].pageY;
    
        top_start = item.offsetTop; //获取当前元素距顶部距离
        left_start = item.offsetLeft; //获取当前元素距左边部距离
    }

    function fun(e){
        movex = e.touches[0].pageX;
        movey = e.touches[0].pageY;
        X = movex - startx + parseInt(left_start);
        Y = movey - starty + parseInt(top_start);
    
        target.style.top= Y + "px"
        target.style.left= X + "px"
        //限制元素在某个范围内

        // if(parseInt(target.offsetTop) >= 250){
        //     target.style.top= 250 + "px";
        // }
        // if(parseInt(target.offsetTop) <= -140){
        //     target.style.top= -140 + "px";
        // }
    }
}