<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖曳</title>
</head>
<style>
#box{width: 400px;height: 400px;position: absolute;left:100px;top:100px;background: #eee;padding:5px;}
#main{border: 1px solid #666;background: white;}
#bar{height: 50px;background: #beceeb;cursor: move;border-bottom:1px solid #a0b3d6;padding-left: 5px;line-height: 50px;}
#content{height: 320px;padding: 10px;}
</style>
<body>
<div id="box">
<div id="main">
<div id="bar" >拖拽</div>
<div id="content">
内容……
</div>
</div>
</div>
</body>
<script>
window.onload = function()
{
var bar = document.getElementById('bar');
var box = document.getElementById("box");
bar.onmousedown = function(event)
{
drag(event,box);
}
if (document.attachEvent) //ie处理程序
{
bar.attachEvent("onmousedown",function()
{drag(event,box); });
}
}
function drag(event,obj)//拖曳
{
var event = event || window.event;
// console.log(event.clientX);
console.log(obj.offsetTop);
var disX = event.clientX - obj.offsetLeft;//偏移量
var disY= event.clientY - obj.offsetTop;
console.log(disY);
document.onmousemove = function(event)
{
event = event || window.event;
mouseMove(event,disX,disY);
}
document.onmouseup = function()
{
document.onmousemove = null;
document.onmouseup = null;
}
}
function mouseMove(event,disX,disY)//鼠标移动时
{
var box = document.getElementById('box');
var event = event || window.event;
var left = event.clientX - disX;
var top = event.clientY - disY;
var winWidth = document.documentElement.clientWidth || document.body.clientWidth;
var winHeight = document.documentElement.clientHeight || document.body.clientHeight;
maxW = winWidth - box.offsetWidth;
maxH = winHeight - box.offsetHeight;
if (left > maxW)
{
left = maxW;
}
else if (left < 0)
{
left = 0;
}
else if(top >maxH)
{
top = maxH;
}
else if(top < 0)
{
top = 0;
}
box.style.left = left +'px';
box.style.top = top + 'px';
}
</script>
</html>把7年前写的总结给你： http://blog.csdn.net/sohighthesky/article/details/4065873