开发学院网页设计JavaScript JavaScript拖拽原理的实现 阅读

JavaScript拖拽原理的实现

 2011-05-17 19:50:31 来源:本站整理   
核心提示:实现拖拽的基本思路 拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素,鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的top和left的改变,JavaScript拖拽原理的实现,当然,并不是任何时候移动鼠标都要造成元素的移动,灵活性太差;鼠标样式没有变换;快速的“乱甩拖拽&r

实现拖拽的基本思路 

拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的top和left的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的。

根据以上的基本原理,我写出了下面的基本思路。感觉代码还是比较短的,

  1. view plaincopy to clipboardprint  
  2. 拖拽状态 = 0鼠标在元素上按下的时候{    
  3.   拖拽状态 = 1    
  4.   记录下鼠标的x和y坐标    
  5.   记录下元素的x和y坐标    
  6.   }    
  7.   鼠标在元素上移动的时候{    
  8.   如果拖拽状态是0就什么也不做。    
  9.   如果拖拽状态是1,那么    
  10.   元素y = 现在鼠标y - 原来鼠标y + 原来元素y    
  11.   元素x = 现在鼠标x - 原来鼠标x + 原来元素x    
  12.   }    
  13.   鼠标在任何时候放开的时候{    
  14.   拖拽状态 = 0    
  15.   }    

将以上思路翻译成JS代码就可以实现拖拽的效果了。 

JavaScript代码 

  1. view plaincopy to clipboardprint  
  2. <mce:script type="text/javascript"><!--    
  3.   var dragging = false;    
  4.   var test;    
  5.   var mouseY;    
  6.   var mouseX;    
  7.   window.onload = function(){    
  8.   test = document.getElementById("test");    
  9.   test.onmousedown = down;    
  10.   test.onmousemove = move;    
  11.   document.onmouseup = up;    
  12.   test.style.position = "relative";    
  13.   test.style.top = "0px";    
  14.   test.style.left = "0px";    
  15.   }    
  16.   function down(event)    
  17.   {    
  18.   event = event || window.event;    
  19.   dragging = true;    
  20.   mouseX = parseInt(event.clientX);    
  21.   mouseY = parseInt(event.clientY);    
  22.   objY = parseInt(test.style.top);    
  23.   objX = parseInt(test.style.left);    
  24.   }    
  25.   function move(event){    
  26.   event = event || window.event;    
  27.   if(dragging == true){    
  28.     var x,y;    
  29.     y = event.clientY - mouseY + objY;    
  30.     x = event.clientX - mouseX + objX;    
  31.     test.style.top = y + "px";    
  32.     test.style.left = x + "px";    
  33.   }    
  34.   }    
  35.   function up(){    
  36.   dragging = false;    
  37.   }    
  38.   // --></mce:script>   

HTML代码 

  1. view plaincopy to clipboardprint  
  2. <div id="test" style="border:1px solid; width:400px; background:#CCCCCC;">    
  3.    <p>我是拖拽示例DIV。</p>    
  4.    <p>可以试验一下效果。</p>    
  5.   </div>    

 演示代码

  1. + expand sourceview plaincopy to clipboardprint 

缺点与待完善之处 

这个拖拽的例子还相当不完善,不过已经实现了拖拽最根本的核心。想到的待完善部分有下面几点:获得元素的x与y坐标的方法在本文里简化掉了;本文只让一个固定的元素具有了拖拽功能,灵活性太差;鼠标样式没有变换;快速的“乱甩拖拽”有一定概率出现问题。其中最后一个问题暂时不知道怎么解决,前面三个比较好办。


Tags:JavaScript 原理 实现

编辑录入:coldstar [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接