拖放效果系列 一

为什么要实现这个拖拽效果？

菜鸟一直比较好奇JavaScript的拖拽是怎么实现的，刚刚进入大四，闲时间又多了，突然想起一探JS拖拽的究竟。百度搜索到了蓝色的一篇文章“怎么用javascript进行拖拽”，英文原文为“How to Drag and Drop in JavaScript”。文章比我想象的复杂，仅仅是获得鼠标事件的x、y的绝对位置就写了一页（我的想法是拖拽根本就不需要得到准确的鼠标绝对位置），还要考虑浏览器之间的兼容性。最郁闷的是测试了一下，第一个显示鼠标位置的例子在IE下和FF下就不一致了。

索性决定按照自己的思路来实现拖拽效果。很幸运，试验成功了，也就有了下面的代码。
实现拖拽的基本思路

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

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

Javascript代码

1. 拖拽状态 = 0  
2. 鼠标在元素上按下的时候{  
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. }  

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

 

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

Javascript代码

1. <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.     event = 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.     event = 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. </script>  

<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)
{
	event = 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){
	event = 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;
}
</script>

HTML代码

Html代码

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

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

JS拖拽的实际效果

点击进入示例网页
缺点与待完善之处

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

   1. JavaScript拖拽
   2. JavaScript拖拽2——多元素、分离JS
   3. JavaScript拖拽3——解决快速拖拽的问题
   4. JavaScript拖拽4——获得元素的位置
   5. JavaScript拖拽5——性能优化
   6. JavaScript拖拽6——修复错误