当前位置导航:炫浪网>>网络学院>>网页制作>>JavaScript教程

JavaScript页面内拖拽原理分析

  实现拖拽的基本思路

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

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

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

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

  JavaScript代码

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

   HTML代码

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

演示代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
  2.      <html xmlns="http://www.w3.org/1999/xhtml">    
  3.      <head>    
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  5.      <title>JavaScript拖拽示例网页</title>    
  6.      <mce:script type="text/javascript"><!--     
  7.      var dragging = false;   
  8.      var test;   
  9.      var mouseY;   
  10.      var mouseX;   
  11.      window.onload = function(){   
  12.         test = document.getElementById("test");   
  13.         test.onmousedown = down;   
  14.         test.onmousemove = move;   
  15.         document.onmouseup = up;   
  16.         test.style.position = "relative";   
  17.         test.style.top = "0px";   
  18.         test.style.left = "0px";   
  19.      }   
  20.      function down(event)   
  21.      {   
  22.         eventevent = event || window.event;    
  23.         dragging = true;    
  24.         mouseX = parseInt(event.clientX);   
  25.         mouseY = parseInt(event.clientY);   
  26.         objY = parseInt(test.style.top);   
  27.         objX = parseInt(test.style.left);   
  28.      }   
  29.      function move(event){   
  30.         eventevent = event || window.event;    
  31.         if(dragging == true){   
  32.             var x,y;   
  33.             y = event.clientY - mouseY + objY;   
  34.             x = event.clientX - mouseX + objX;   
  35.             test.style.top = y + "px";   
  36.             test.style.left = x + "px";   
  37.         }   
  38.      }   
  39.      function up(){   
  40.         dragging = false;   
  41.      }   
  42.      // --></mce:script>    
  43.      </head>    
  44.          
  45.      <body>    
  46.      <div id="test" style="border:1px solid; width:400px; background:#CCCCCC;">    
  47.        <p>我是拖拽示例DIV。</p>    
  48.        <p>可以试验一下效果。</p>    
  49.      </div>     
  50.      </body>    
  51.      </html>  

  缺点与待完善之处

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

相关内容
赞助商链接