jQuery学习

1、jQuery菜单拖动

let canMove=false;//默认定义canMove为false 不可移动
let x=0;
let y=0;
   $('.layer').mousedown(function(e){//鼠标按下触发
       x=e.pageX-$('.layer').offset().left
       //鼠标点击位置的X轴距离—外侧至边框的x轴距离
       y=e.pageY-$('.layer').offset().top
       //鼠标点击位置的y轴距离—外侧至边框的y轴距离
        canMove=true;
   })
   $(window).mouseup(function(){//鼠标抬起 使菜单不可移动
        canMove=false;
   })
   $(window).blur(function(){//鼠标失去焦点 菜单不可移动
        canMove=false;
   })
   $(window).mousemove(function(e){
       e.preventDefault;
        if(canMove){
            let left=e.pageX-x //边框距离左侧距离
            let top=e.pageY-y  //边框距离上侧距离
            // if(left<0) left=0 
            // if(top<0) top=0
            let maxLeft=$(window).innerWidth()-$('.layer').innerWidth()
            //使菜单无法移出左侧边框
            let maxTop=$(window).innerHeight()-$('.layer').innerHeight()
            //使菜单无法移出上侧边框
            // if(left>maxLeft) left=maxLeft
            // if(top>maxTop) top=maxTop
            let result=$.filterLeftAndTop(left,top,maxLeft,maxTop)
            //封装的filterLeftAndTop函数
            $('.layer').css({
                left:result.left,
                top:result.top
            })
            // $('.layer').css({
            //     left,
            //     top
            // })
        }
   })
   $.extend({
filterLeftAndTop(left,top,maxleft,maxtop,minleft=0,mintop=0){
    if(left<minleft) left=minleft
    if(top<mintop) top=mintop
    if(left>maxleft)left=maxleft
    if(top>maxtop)top=maxtop
    return{
        left,
        top
    }
}

})