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;

}

}

}

（前端小白，如有错误，欢迎指正~~）