遇到这需求是想模仿网页版QQ，多个会话框时会叠一起，需要有拖拽功能。
网上找到了一篇代码（原文地址），但其中有少数地方边界处理没做好，计算也有一点问题，修正了下。原文所说的弊端未解决。
界面代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
html,body
{
height:100%;
100%;
padding:0;
margin:0;
}
.dialog
{
250px;
height:250px;
position:absolute;
background-color:#ccc;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
z-index:1;
}
.dialog-title
{
color:#fff;
background-color:#404040;
font-size:12pt;
font-weight:bold;
padding:4px 6px;
cursor:move;
}
.dialog-content
{
padding:4px;
}
</style>
</head>
<body>
<div id="dlgTest" class="dialog">
<div class="dialog-title">Dialog</div>
<div class="dialog-content">
This is a draggable test.
</div>
</div>
</body>
</html>JS代码
var Dragging = function(validateHandler){ //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
var draggingObj = null; //dragging Dialog
var diffX = 0;
var diffY = 0;
function mouseHandler(e){
switch(e.type){
case 'mousedown':
draggingObj = validateHandler(e);//验证是否为可点击移动区域
if(draggingObj != null){
diffX = e.clientX - draggingObj.offsetLeft;
diffY = e.clientY - draggingObj.offsetTop;
}
break;
case 'mousemove':
if(draggingObj){
draggingObj.style.left = (e.clientX - diffX) + 'px';
draggingObj.style.top = (e.clientY - diffY) + 'px';
}
break;
case 'mouseup':
draggingObj = null;
diffX = 0;
diffY = 0;
break;
}
};
return {
enable:function(){
document.addEventListener('mousedown',mouseHandler);
document.addEventListener('mousemove',mouseHandler);
document.addEventListener('mouseup',mouseHandler);
},
disable:function(){
document.removeEventListener('mousedown',mouseHandler);
document.removeEventListener('mousemove',mouseHandler);
document.removeEventListener('mouseup',mouseHandler);
}
}
}
function getDraggingDialog(e){
var target = e.target;
while(target && target.className.indexOf('dialog-title') == -1){
target = target.offsetParent;
}
if(target != null){
return target.offsetParent;
}else{
return null;
}
}
// 启动拖拽效果
Dragging(getDraggingDialog).enable();