拖拽事件

这里写的是一个原生js实现拖拽的效果，首先：

1、实现拖拽的三大事件，是要首先清楚的

onmousedown （鼠标按下的时候）、onmousemove（鼠标移动的时候）、onmouseup（鼠标松开的时候）

2、给目标元素加上onmousedown时间，记录鼠标按下的时候，鼠标距离所在元素的位置（就是鼠标距离所在元素边界的距离left、top）记录为disX、disY。要注意的是，要移动的是这个元素，就要算出鼠标坐标与这个元素边界的距离，拖动过程中，鼠标与元素边界位置距离是不变的。

3、当onmousedown发生后，给document添加onmousemove事件，可以根据一下公司不断刷新目标元素的实时位置

目标元素.left = oEvent。clientX - disX + 'px';

目标元素.top = oEvent .clientY - disY + 'px';

4、在onmousemove完成后，给document再添加omouseup时间，取消document的onmousemove时间

过程就是以上3个步骤，直接看原理也许晦涩难懂，这里就用代码来直接显示吧；

var obox = document.getElementById('drag')//1、给需要移动的元素添加onmousedown事件,给拖动做好准备obox.onmousedown = function(evt) {var oEvent = evt || event; //获取事件对象，这个是兼容写法var disX = oEvent.clientX - parseInt(obox.style.left);var disY = oEvent.clientY - parseInt(obox.style.top);//这里就解释为什么要给document添加onmousemove时间，原因是如果你给obox添加这个事件的时候，当你拖动很快的时候就很快脱离这个onmousemove事件，而不能实时拖动它document.onmousemove = function(evt) { //实时改变目标元素obox的位置var oEvent = evt || event;obox.style.left = oEvent.clientX - disX + 'px';obox.style.top = oEvent.clientY - disY + 'px';}//停止拖动document.onmouseup = function() {document.onmousemove = null;document.onmouseup = null;}}

上面是就实现拖拽的原理；还有一些原理不清楚就是clientX这些距离问题，我这里用一张图来表示吧

在拖拽的过程中，每次都要算出这个top，left只也是很麻烦，在js有几个很好用的属性：

• offsetLeft：相对参照物的左边距离
• offsetTop：相对参照物的上边距离（就如box.offsetTop，就是相对于父元素上边边距的距离）
• offsetWidth：元素节点的宽度（相对于width，但是没有单位）
• offsetHeight：元素节点的高度
• offsetX：事件对象的属性，用这个属性，就可以不用计算鼠标距离所在元素边界的距离disX的值了，可以直接disX = oEvent.offsetX;得到
• offsetY：事件对象的属性，同理offsetX；
• offsetParent：参照物父元素

这里要注意的是，offsetLeft / offsetTop 都是只读的