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:参照物父元素