• 弹出框的鼠标拖拽事件


    几个与定位有关的概念:

    js:

    clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标。

    screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的坐标信息。

    pageX/pageY属性:可以获得鼠标事件发生时鼠标光标相对于整个文档元素的坐标位置(包含滚动)。在页面没有滚动的情况下,通常pageX/pageY的值与clientX/clientY的值相等。

    layerX/layerY属性:他是对于绝对定位元素来说的,相对于当前点击元素的左上角定位的。当页面上的元素时相对定位(position:relative)的时候,通常pageX/pageY和layerX/layerY的值是相同的,但是当元素绝对定位(position:absolute)了的时候,layerX/layerY就将鼠标光标位置相对于本身的左上角定位了。

    jquery:

    position()

    获取匹配元素相对父元素的偏移。

    返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

    offset()

    获取匹配元素在当前视口的相对偏移。

    返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。

    event.pageX

    鼠标相对于文档的左边缘的位置。

     

    event.pageY

    鼠标相对于文档的上边缘的位置。

     
     

    原理:

    1.鼠标在弹出框上按下时,获取鼠标相对于弹出框的left和top值l、t,这时弹出框状态改为可拖动(mousedown事件)

    2.当弹出框状态为可拖动时:(mousemove事件)

      ①重新定位弹出框的位置;(获取鼠标相对于可视区域的left和top值L、T,并且弹出的坐标移动,它的offsetLeft为L-l;offsetTop为T-t)

      ②限定弹出框的运动范围;

    3.当鼠标按钮弹起时,弹出框不在移动,即状态改为不可拖动;(mouseup)

    实例:

    HTML:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>鼠标拖拽事件</title>
    <style>
    *{
        margin:0;
        padding: 0;
    }
    
    #container{
        width: 380px;
        border: 1px solid #999;
        position: absolute;
        z-index: 5;
    }
    #mask{
        position: absolute;
        height:100%;
        width: 100%;
        background: black;
        opacity: 0.6;
        /*filter:alpha(opacity=40);*/
        z-index: 1;
        left: 0;
        top:0;
    }
    #top{
        background: #ccc;
        height: 30px;
        cursor: pointer;
    }
    #content{
        height: 100px;
        line-height: 20px;
        background: #fff;
        padding: 20px 0 0 0;
    }
    p{
        text-align: center;
    }
    </style>
    <script src='demo.js'></script>
    <body>
        <div id='mask'></div>
        <div id='container'>
            <div id='top'></div>
            <div id='content'>
                <p><label>请输入用户名</label><input type='text' class='ipt'></p>
                <p><label>  请输入密码</label><input  type='password' class='ipt'></p>
            </div>
    
        </div>
    </body>
    </html>
    View Code

    JS:

    window.onload=function(){
        var container=document.getElementById('container');
        var top=document.getElementById('top');
        var oMask=document.getElementById('mask')
        console.log(container);
        var startX ;
        var startY;
        var flag=false;
        top.onmousedown=function(e){
            var e= e||window.event;
            startX=e.clientX-container.offsetLeft;           //获取鼠标点与container的相对位置
            startY=e.clientY-container.offsetTop;
            flag=true;
        }
    
    
        container.onmousemove=function(e){
            var e= e||window.event;
            var endX=e.clientX;
            var endY=e.clientY;
            var moveX=endX-startX;
            var moveY=endY-startY;
            
            //范围限定
            var maxW=oMask.offsetWidth-container.offsetWidth;   
            var maxH=oMask.offsetHeight-container.offsetHeight;
            moveX=Math.min(maxW,Math.max(0,moveX));             //取得范围在[0,maxW]之间的值
            moveY=Math.min(maxH,Math.max(0,moveY));
    
    
    
            if(flag==true){
                container.style.left=moveX+'px';           //鼠标与可视区域的相对位置-鼠标点与container的相对位置=container与可视区域的相对位置
                container.style.top =moveY+'px';
            }
            
        }
        document.onmouseup=function(e){
            flag=false;
        }
        
    
    
    }
    View Code

     jQury实现

    $(function(){
        var flag=false;
        var mouseLeft;
        var mouseTop;
        $('#top').mousedown(function(event){  
            var downX=event.pageX;       //获取鼠标坐标
            var downY=event.pageY;
            var offsetLeft=$('#container').position().left    //获取弹出框的left值
            var offsetTop =$('#container').position().top
            mouseLeft=downX-offsetLeft;       //计算鼠标在弹出框中的位置
            mouseTop =downY-offsetTop;
            //console.log(mouseLeft)
            flag=true;
        })
    
    
    
        $(document).mousemove(function(event){  
            
            if(flag==true){
                var moveX=event.pageX;       //获取鼠标坐标
                var moveY=event.pageY;
                var moveLeft=moveX-mouseLeft;  //获取移动过程中弹出框的left值
                var moveTop =moveY-mouseTop;
                var maxX=$(document).width() -$('#container').outerWidth();
                var maxY=$(document).height()-$('#container').outerHeight();
                console.log($('#container').outerWidth())
                //范围限定
                moveLeft=Math.min(Math.max(0,moveLeft),maxX);
                moveTop =Math.min(Math.max(0,moveTop),maxY);
                //console.log(moveLeft)
                $('#container').css({'left':moveLeft,'top':moveTop,'backgroud':'red'});
            }
            
        })
    
    
    
        $(document).mouseup(function(event){  
            flag=false;
        })
    View Code
  • 相关阅读:
    双连通分量
    题解 骰子
    2020 最新 Kubernetes实战指南:从零到架构师的进阶之路
    kubernetes实战(二十八):Kubernetes一键式资源管理平台Ratel安装及使用
    新书推荐《再也不踩坑的Kubernetes实战指南》
    为什么要用Kubernetes?
    Kubernetes实战指南(三十一):零宕机无缝迁移Spring Cloud至k8s
    kubernetes实战(三十一):Prometheus监控Windows主机
    kubernetes实战(三十):CentOS 8 二进制 高可用 安装 k8s 1.17.x
    kubernetes实战(二十九):Kubernetes RBAC实现不同用户在不同Namespace的不同权限
  • 原文地址:https://www.cnblogs.com/yzg1/p/4460163.html
Copyright © 2020-2023  润新知