转载:https://blog.csdn.net/u013040887/article/details/83059094
这里写的是一个原生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 都是只读的
---------------------