几个与定位有关的概念：
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>
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; } }
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; })