js高阶之-元素在限制范围内的拖动
一.补充知识
元素的offsetLeft
offsetTop
offsetLeft 和 offsetTop 属性返回当前元素的偏移位置。IE 怪异模式以父元素为参照进行偏移位置,DOM 标准模式以最近定位元素为参照进行偏移的位置,offsetLeft是离其最近的已经定位的元素,如果没有就相对于body元素计算
对应最近父元素情况
1.body元素
2.table,th,tr,th元素,但其应具有position:releative\absolute,fixed
3.除position:static的定位元素
二.元素的拖动---任意位置
拖放的三个事情
鼠标落下,锁定了鼠标与元素的相对位置
disX=event.pageX-oDiv.offsetLeft;
disY=event.pageY-oDiv.offsetTop;
鼠标移动时,鼠标改变,元素同时改变位置(反推过程)
oDiv.style.left=event.pageX-disX+
oDiv.style.top=event.pageY-disY+
鼠标抬起,解除上面的效果
document.οnmοusemοve=document.οnmοuseup=null;//取消移动效果
实现源码:
var oDiv=document.querySelector("div");
oDiv.onmousedown=function(){
//鼠标距离元素的位置
var disX=event.pageX-oDiv.offsetLeft;//元素距离页面
var disY=event.pageY-oDiv.offsetTop;
document.onmousemove=function(){//换成document---防止位置拖放扔掉现象
//反推
oDiv.style.left=ev