在javascript中，我们可以通过事件event对象来获取一些属性和方法。其中clinetX和clientY这两个属性可以拿到鼠标相对于窗口的坐标位置，并且是无单位的数。
在了解了需要的信息下，我们开始今天的主题——拖拽
需要了解事件： onmousedown、onmouseup、onmousemove
需要了解事件对象属性：clientX、clientY、offsetLeft、offsetTop
下面是实现代码
<div></div> // html
css部分
div{
width: 150px;
height: 150px;
background: red;
position: absolute; // 必须定义
top: 0;
left: 0;
}
js部分
// 首先找到我们要拖拽的元素
oDiv = document.getElementsByTagName('div')[0];
// 监听鼠标按下事件
oDiv.onmousedown = function(event){
var event = event || window.event //兼容低版本IE
// 鼠标按下的时候记录鼠标在盒子中的位置
var deltaX = event.clientX - oDiv.offsetLeft; // 相对于X轴的偏移量
var deltaY = event.clientY - oDiv.offsetTop; // 相对于Y轴的偏移量
// 给整个document添加mousemove事件，鼠标移动时触发
document.onmousemove = function(event2) { // 为了区别开上下文event事件对象 定义为event2
oDiv.style.left = event2.clientX - deltaX + 'px';
oDiv.style.top = event2.clientY - deltaY + 'px';
}
}
// 监听鼠标抬起事件
document.onmouseup = function() {
document.onmousedown = null; // 删除了监听
}
上面这段代码就是拖拽的实现逻辑，偏移量的计算是为了让div在鼠标移动过程中只运算div相对于窗口的移动距离，而不是鼠标。
有什么不足之处，请各位大大指点。
