js拖拽之一：实现简单的元素拖拽
先介绍一下实现元素拖动需要的坐标属性。offsetLeft、offsetTop 和 clientX、clientY
offsetLeft \ offsetTop 用在dom节点中，可以返回当前元素距离某个父辈元素左边缘的距离
ps. （1）如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。
（2）如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。
语法：obj.offsetLeft
clientX、clientY 在事件中使用，返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
语法： event.clientX
实现原理：
选择元素时（鼠标按下）保存鼠标的位置和元素位置的差值；移动元素时（鼠标移动），不停的给元素赋值（当前鼠标位置减去保存的差值）；释放元素（鼠标抬起）时，取消移动事件
实现步骤：
1、按下时保存差值：
var disX = ev.clientX - 元素.offsetLeft
var disY = ev.clientY - 元素.offsetTop
2、移动时：
元素.style.left = ev.clientX - disX + 'px';
元素.style.top= ev.clientY - disY + 'px';
3、释放元素时：
元素.onmousemove = 元素.onmouseup = null;
问题：
1、移动太快脱离元素时事件就不会执行了
onmousemove事件放在document上就可以了
2、抬起鼠标时在其他元素上抬起的，元素也不会停止
同样把onmouseup事件也放在document上
具体代码：（注：obj需要定位，否则无法获取其left,top值）
function Drag(obj){
oDiv.onmousedown = function(ev){ //鼠标按下时
ev = ev || event;
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
document.onmousemove = function(ev){ //鼠标移动时
ev = ev || event;
obj.style.left = ev.clientX - disX + 'px';
obj.style.top = ev.clientY - disY + 'px';
}
document.onmouseup = function(){ //鼠标抬起时
document.onmouseup=document.onmousemove=null;
}
}
}
（前端小白，如有错误，欢迎指正~~）