拖拽事件

css： *{margin:0;padding:0;} //清除浏览器默认属性
#box{width:100px;height:100px;background:red;position:absolute;cursor:move;} //给盒子定值
div：

script：box.function(e){
var e = e || event; //获取event对象
var X= e.clientX-box.offsetLeft; // 计算鼠标按下的时候到盒子的边界左边界距离；
var Y =e.clientY-box.offsetTop;// 计算鼠标按下的时候到盒子的边界上边界距离；
document.function(e){
var e = e || event;
var moveX= e.clientX-X; // 计算盒子被移动后到浏览器左边界的距离
var moveY = e.clientY-Y; // 计算盒子被移动后到浏览器上边界的距离
var winX = document.documentElement.clientWidth; //可见窗口的宽
var winY = document.documentElement.clientHeight; // 可见窗口的高；
var maX = winX-box.offsetWidth;
var maX = winY-box.offsetHeight; //防止box跑出去

if(moveX<0){moveX=0}
if(moveY<0){moveY=0}
if(moveX>maX){moveX=maX}
if(moveY>maY){moveY=maY}  //防止box跑出去（屏幕外）
box.style.left=moveX+"px"
box.style.top=moveY+"px"
}
}
document.function(){     //鼠标按键松开事件
document.null      //鼠标松开后肯定什么事都不会发生
}