JavaScript页面内拖拽原理分析

核心提示： 实现拖拽的基本思路拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素，鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的top和left的改变，JavaScript页面内拖拽原理分析，当然，并不是任何时候移动鼠标都要造成元素的移动，拖拽状态 = 0鼠标在元素上按下的时候{ 拖拽状态 =

 

实现拖拽的基本思路

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

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

拖拽状态 = 0鼠标在元素上按下的时候{   
　　拖拽状态 = 1   
　　记录下鼠标的x和y坐标   
　　记录下元素的x和y坐标   
　 }   
　 鼠标在元素上移动的时候{   
　　如果拖拽状态是0就什么也不做。   
　　如果拖拽状态是1，那么   
　　元素y = 现在鼠标y - 原来鼠标y + 原来元素y   
　　元素x = 现在鼠标x - 原来鼠标x + 原来元素x   
　 }   
　 鼠标在任何时候放开的时候{   
　　拖拽状态 = 0   
　 }   
　

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

JavaScript代码

<mce:script type="text/javascript"><!--   
　 var dragging = false;   
　 var test;   
　 var mouseY;   
　 var mouseX;   
　 window.onload = function(){   
　　test = document.getElementById("test");   
　　test.onmousedown = down;   
　　test.onmousemove = move;   
　　document.onmouseup = up;   
　　test.style.position = "relative";   
　　test.style.top = "0px";   
　　test.style.left = "0px";   
　 }   
　 function down(event)   
　 {   
　　eventevent = event || window.event;　  
　　dragging = true;　  
　　mouseX = parseInt(event.clientX);   
　　mouseY = parseInt(event.clientY);   
　　objY = parseInt(test.style.top);   
　　objX = parseInt(test.style.left);   
　 }   
　 function move(event){   
　　eventevent = event || window.event;　  
　　if(dragging == true){   
　　　　var x,y;   
　　　　y = event.clientY - mouseY + objY;   
　　　　x = event.clientX - mouseX + objX;   
　　　　test.style.top = y + "px";   
　　　　test.style.left = x + "px";   
　　}   
　 }   
　 function up(){   
　　dragging = false;   
　 }   
　 // --></mce:script>