简单记录

div在页面上随意拖动

时间 ：2019-5-29  作者： thtomatic  分类： JavaScript   评论: [ 0 ] 条  浏览: [ 931 ] 次

Html：

<div  id="barrage">        
         //.......               
 </div>

需要引入jquery

Jquery:

<script type="text/javascript">
    $(function(){
        var cont=$("#quick_btn");
        var contW=$("#quick_btn").width();
        var contH=$("#quick_btn").height();
        var startX,startY,sX,sY,moveX,moveY;
        var winW=$(window).width();
        var winH=$(window).height();

//绑定事件
        cont.on({
            touchstart:function(e){
                startX = e.originalEvent.targetTouches[0].pageX;    //获取点击点的X坐标
                startY = e.originalEvent.targetTouches[0].pageY;    //获取点击点的Y坐标
                //console.log("startX="+startX+"************startY="+startY);
                sX=$(this).offset().left;//相对于当前窗口X轴的偏移量
                sY=$(this).offset().top;//相对于当前窗口Y轴的偏移量
                //console.log("sX="+sX+"***************sY="+sY);
                leftX=startX-sX;//鼠标所能移动的最左端是当前鼠标距div左边距的位置
                rightX=winW-contW+leftX;//鼠标所能移动的最右端是当前窗口距离减去鼠标距div最右端位置
                topY=startY-sY;//鼠标所能移动最上端是当前鼠标距div上边距的位置
                bottomY=winH-contH+topY;//鼠标所能移动最下端是当前窗口距离减去鼠标距div最下端位置
            },
            touchmove:function(e){
                e.preventDefault();
                moveX=e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标
                moveY=e.originalEvent.targetTouches[0].pageY;//移动过程中Y轴的坐标
                //console.log("moveX="+moveX+"************moveY="+moveY);

                if(moveX<leftX){moveX=leftX;}
                if(moveX>rightX){moveX=rightX;}
                if(moveY<topY){moveY=topY;}
                if(moveY>bottomY){moveY=bottomY;}
                $(this).css({
                    "left":moveX+sX-startX,
                    "top":moveY+sY-startY,
                })
            },

        })

    })
</script>

• 赞1
• 
• 踩0