你的位置:首页 > Java教程

[Java教程]javascript如何指定元素的拖拽范围


javascript如何指定元素的拖拽范围:
有时候拖拽效果需要限定在某一个指定的元素之内,也就是说只能够在指定的元素内进行拖拽,下面就通过一个代码实例介绍一下如何实现此效果。代码实例如下:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /><title>拖拽效果限制范围-蚂蚁部落</title><style type="text/css">*{ margin:0px; padding:0px;}body{ padding:50px;}#box{ width:350px; height:250px; background:red; overflow:hidden; position:relative;}#drag{ width:50px; height:50px; background:green; position:absolute;}</style><script type="text/javascript">window.onload=function(){ var obox=document.getElementById("box"); var odrag=document.getElementById("drag"); var isDrag=false; var x,y;   odrag.onmousedown=down; document.onmousemove=move; document.onmouseup=up;   function down(ev){  var ev=window.event||ev;  x=ev.clientX-this.offsetLeft;  y=ev.clientY-this.offsetTop;  this.style.cursor="move";   isDrag=true; } function move(ev){  if(isDrag){   var ev=window.event||ev;   odrag.style.left=(ev.clientX-x)+"px";   odrag.style.top=(ev.clientY-x)+"px";   if(parseInt(odrag.style.left)<0){    odrag.style.left=0;   }   if(parseInt(odrag.style.top)<0){    odrag.style.top=0;   }   if(parseInt(odrag.style.left)>obox.clientWidth-odrag.clientWidth){    odrag.style.left=(obox.clientWidth-odrag.clientWidth)+"px";   }   if(parseInt(odrag.style.top)>obox.clientHeight-odrag.clientHeight){     odrag.style.top=(obox.clientHeight-odrag.clientHeight)+"px";   }  } } function up(){  isDrag=false;  odrag.style.cursor="pointer"; }}</script></head><body><div id="box"> <div id="drag"></div></div></body></html>

以上代码实现了拖拽效果,并且将拖拽返回限定在红色的div之内,下面就介绍一下实现过程:
一.实现原理:
原理其实非常的简单,绿色的div定位方式为绝对定位,它的父元素的定位方式为相对定位,那么绿色div的定位参考对象就是红色的div,当进行拖动的时候就会判断元素的left和top属性值是否使绿色div超出了红色父元素的边界,如果超出就将他们的top和left属性值设置为边界临界状态,这样就实现了将绿色div限定于红色div之内。
二.代码注释:
1.window.onload=function(){},当文档内容完全加载完成之后再去执行函数中的代码。
2.var obox=document.getElementById("box"),获取id属性值为box的元素。
3.var odrag=document.getElementById("drag"),获取id属性值为drag的元素。
4.var isDrag=false,此变量用于标识div是否可以被拖动。
5.var x,y,用于存放鼠标指针距离要拖动div的左边缘和上边缘的距离。
6.odrag.onmousedown=down,为绿色div注册onmousedown事件处理函数。
7.document.onmousemove=move,为document对象注册onmousemove事件处理函数,之所以没有直接给odrag注册,是因为利用事件冒泡可以防止鼠标滑出div导致拖动失效现象。
8.document.onmouseup=up,为document对象注册onmouseup事件处理函数,同样利用了事件冒泡。
9.function down(ev){},onmousedown事件处理函数,ev为事件对象。
10.var ev=window.event||ev,为了兼容各主要浏览器。
11.x=ev.clientX-this.offsetLeft,获取鼠标指针距离div左边缘的距离。
12.y=ev.clientY-this.offsetTop,获取鼠标指针距离div上边缘的距离。
13.this.style.cursor="move",将鼠标的指针形状设置为十字型。
14.isDrag=true,将isDrag值设置为true,也就是可以拖动。
15.function move(ev){},onmousemove事件处理函数,ev为事件对象。
16.if(isDrag),判断是否可以拖动。
17.odrag.style.left=(ev.clientX-x)+"px",设置div的lef属性值。
18.odrag.style.top=(ev.clientY-x)+"px",设置div的top属性值。
19.if(parseInt(odrag.style.left)<0),如果小于0,说明超出左边缘。
20.odrag.style.left=0,将left属性值设置为0,那么恰好在父元素的左边缘。
21.if(parseInt(odrag.style.top)<0),这个原理同上,只是方位不同,这里不多介绍了。
22.if(parseInt(odrag.style.left)>obox.clientWidth-odrag.clientWidth),用于判断绿色div的left属性值是否大于父元素的宽度减去绿色div的宽度,也就是说是否超过了父元素的右边界。
22.odrag.style.left=(obox.clientWidth-odrag.clientWidth)+"px",将绿色div的left属性值设置为obox.clientWidth-odrag.clientWidth,也就是说绿色div的右边界恰好在父div的右边缘。
23,.if(parseInt(odrag.style.top)>obox.clientHeight-odrag.clientHeight),原理同上,这里不多介绍了。
24.function up(){},onmouseup事件处理函数。
25.isDrag=false,设置为不能拖动。
相关阅读:
1.javascript如何注册事件处理函数一章节。
2.javascript如何动态设置div的样式一章节。
3.javascript如何获取元素的子节点和父节点一章节。
4.var ev=window.event||ev的作用是什么一章节。
5.JavaScript的parseInt()函数一章节。
6.clientWidth属性可以参阅scrollTop、offsetHeight和offsetTop等属性用法详解一章节。
7.关于事件冒泡可以参阅javascript事件冒泡简单介绍一章节。  

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8414

更多内容可以参阅:http://www.softwhy.com/javascript/