弹出框的鼠标拖拽事件

几个与定位有关的概念：

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