好资源导航 » 文章资讯 » JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)（2）

JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)（2）

2024-02-23 16:27:02 47

限制范围的拖拽，要求被拖拽的对象必须在客户区可见范围！

div是body的子元素，div的left/top是针对body的，不是针对可见客户区的，所以在拖拽的过程中不得不考虑被卷走的部分，因为网页文档可能很大，无论宽度还是高度都可能大于客户区，等于客户区大小就很好处理，大于的话就得考虑scrollTop和scrollLeft，否则div会跟鼠标脱离，因为距离都算错了。

/*切记：凡是clientX/Y的一定记得卷走的部分*/
document.body是DOM中Document对象里的body节点,
document.documentElement是文档对象根节点(html)的引用,
document.documentElement.scrollHeight网页整体高度

functiongetPos(ev){
varst=document.documentElement.scrollTop||document.body.scrollTop;
varsl=document.documentElement.scrollLeft||document.body.scrollLeft;
return{x:sl+ev.clientX,y:st+ev.clientY};
}





客户区可见范围限制拖拽

*{
padding:0;
margin:0;
}
#div1{
width:100px;
height:100px;
background:orange;
position:absolute;
}

varoDiv=document.getElementById('div1'); functiongetStyle(obj,attr){ if(obj.currentStyle){ returnobj.currentStyle[attr]; }else{ returngetComputedStyle(obj,null)[attr]; } } //getPos得到的是鼠标当前位置距离页面最左/上边的距离,包括被卷走的部分 functiongetPos(ev){ varscrollTop=document.documentElement.scrollTop||document.body.scrollTop; varscrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return{ x:scrollLeft+ev.clientX, y:scrollTop+ev.clientY }; } functiongetScrollPos(){ varscrollTop=document.documentElement.scrollTop||document.body.scrollTop; varscrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return{ x:scrollLeft, y:scrollTop }; } oDiv.onmousedown=function(ev){ varoEvent=ev||event; varpos=getPos(oEvent); vardisX=pos.x-parseInt(getStyle(oDiv,'left')); vardisY=pos.y-parseInt(getStyle(oDiv,'top')); document.onmousemove=function(ev){ varoEvent=ev||event; varl=oEvent.clientX-disX; vart=oEvent.clientY-disY; if(l<0){ l=0; }elseif(l>document.documentElement.clientWidth-oDiv.offsetWidth){ l=document.documentElement.clientWidth-oDiv.offsetWidth; } if(t<0){ t=0; }elseif(t>document.documentElement.clientHeight-oDiv.offsetHeight){ t=document.documentElement.clientHeight-oDiv.offsetHeight; } l=l+getScrollPos().x;//最后left是相对于body的，加上卷走的部分scrollLeft； t=t+getScrollPos().y;//加上卷走的高度scrollTop //oDiv.style.left=l+'px'; //oDiv.style.top=t+'px'; oDiv.style.cssText=';left:'+l+'px;top:'+t+'px;'; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; }; };

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)（2）

热门推荐

随机推荐