标签：
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/
标签：
原文地址：http://www.cnblogs.com/softwhy/p/5084482.html
