<!doctype html> <html> <head> <title></title> <meta charset = "utf-8"/> </head> <style type="text/css"> </style> <script type="text/javascript"> window.onload=function(){ var isDown = false;//该变量表示鼠标左键是否被按下 var offsetX;//鼠标在按下时，鼠标横坐标和div横坐标的距离差 var offsetY;//鼠标在按下时，鼠标纵坐标和div纵坐标的距离差 var title = document.getElementById("title");//提取标题 var str = window.navigator.userAgent;//判断浏览器 if(str.indexOf("MSIE")!=-1){//IE //移动 title.onmousedown = function(){ if(event.button==1){//当事件属性鼠标左键被按下 var div = document.getElementById("divId");//提取div offsetX = event.clientX-parseInt(div.style.left);//鼠标距离事件源的距离=可视水平坐标-div距离边界距离 offsetY = event.clientY-parseInt(div.style.top); window.status = offsetX+","+offsetY; isDown = true; } } }else{//非IE title.onmousedown = function(event){ //alert(event.button); if(event.button==0){ var div = document.getElementById("divId"); offsetX = event.clientX-parseInt(div.style.left); offsetY = event.clientY-parseInt(div.style.top); isDown = true; } } } //限定移动范围 if(str.indexOf("MSIE")!=-1){//IE document.onmousemove = function(){ if(isDown){ if(event.clientY-offsetY>0 && event.clientX-offsetX>0){ var div = document.getElementById("divId"); div.style.left = (event.clientX - offsetX)+"px";//div的left是鼠标当前横坐标减去offsetX。 div.style.top = (event.clientY - offsetY)+"px";//div的top是鼠标当前纵坐标减去offsetY。 window.status = event.clientX+","+event.clientY; }else{ isDown = false; } } event.returnValue = false; } }else{ document.onmousemove = function(event){ if(isDown){ var div = document.getElementById("divId"); div.style.left = (event.clientX - offsetX)+"px";//div的left是鼠标当前横坐标减去offsetX。 div.style.top = (event.clientY - offsetY)+"px";//div的top是鼠标当前纵坐标减去offsetY。 document.getElementById("content").innerHTML = event+",isDown="+isDown+",left="+event.clientX+",top="+event.clientY; } } } document.onmouseup = function(){ isDown = false; } } </script> <body> <div id="divId" style="position:absolute;left:200px;top:200px;300px;height:200px;z-index:2;border:1px solid;"> <table style="height:200px"> <tr> <td id="title" style="100%;height:25px;background-color:gray">标题</td> </tr> <tr> <td id="content" style="300px;height:180px;">ss</td> </tr> <table> </div> </body> </html>