<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>百度拖拽</title>
<style>
*{
padding: 0;
margin: 0;
}
#wrap{
position: absolute;
left:0;
top:0;
width: 300px;
height: 400px;
background:#0cc;
cursor: move;
}
</style>
</head>
<body>
<div id="wrap">
</div>
<script>
var wrap = document.getElementById("wrap");
// 水平垂直居中=(屏幕宽(高)度-盒子宽(高)度)/2
wrap.style.left = (document.documentElement.clientWidth - wrap.offsetWidth)/2 + "px";
wrap.style.top = (document.documentElement.clientHeight - wrap.offsetHeight)/2 + "px";
//这里只用到常用的三个鼠标事件：onmousedown(鼠标按下去时触发)、onmousemove(鼠标移动时触发)、onmouseup(鼠标松开时触发)
wrap.onmousedown = function(e){//鼠标按下去时
var event = e || window.event;//event是一个事件对象，一个全局对象。e(现代浏览器)，window.event(低版本的IE浏览器)
var oW =event.clientX - wrap.offsetLeft;//X轴盒子的偏移量 = 当前鼠标点击X轴坐标 - 盒子的left值
var oH = event.clientY - wrap.offsetTop;//Y轴盒子的偏移量 = 当前鼠标点击Y轴坐标 - 盒子的top值
document.onmousemove = function(e){//鼠标移动时
var event = e || window.event;
var bLeft = event.clientX - oW;//鼠标移动的left偏移量 = 当前移动的X轴坐标 - X轴盒子的偏移量
var bTop = event.clientY - oH; //鼠标移动的top偏移量 = 当前移动的Y轴坐标 - Y轴盒子的偏移量
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;//获取文档水平方向滚动条位置
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;//获取文档垂直方向滚动条位置
//scrollX和scrollY为0当出现滚动条时才会大于0
//判断屏幕的边界目的是不让盒子超出屏幕的宽(高)度
if(bLeft < scrollX){
bLeft = scrollX;//盒子的偏移量left=scrollX
}
else if(bLeft > document.documentElement.clientWidth - wrap.offsetWidth +scrollX){
bLeft = document.documentElement.clientWidth - wrap.offsetWidth +scrollX;//盒子的偏移量left = 屏幕宽度 - 盒子的宽度+scrollx(滚动条值)
}
if(bTop < scrollY){
bTop = scrollY;//盒子的偏移量top=scrollX
}
else if(bTop > document.documentElement.clientHeight - wrap.offsetHeight +scrollY){
bTop = document.documentElement.clientHeight - wrap.offsetHeight +scrollY;////盒子的偏移量top = 屏幕高度 - 盒子的高度+scrollY(滚动条值)
}
wrap.style.left = bLeft + "px";//盒子的left偏移量
wrap.style.top = bTop + "px";//盒子的top偏移量
}
}
document.onmouseup = function(){
document.onmousemove = null;//鼠标松开时解除onmousemove
}
</script>
</body>
</html>
