阅读排行

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/

文章来自：http://www.cnblogs.com/softwhy/p/5084482.html