JavaScript拖拽原理的实现

来源:互联网 时间:1970-01-01

实现拖拽的基本思路 

拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是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坐标的方法在本文里简化掉了;本文只让一个固定的元素具有了拖拽功能,灵活性太差;鼠标样式没有变换;快速的“乱甩拖拽”有一定概率出现问题。其中最后一个问题暂时不知道怎么解决,前面三个比较好办。


相关阅读:
Top