JavaScript 拖放效果系列一

原文來自：[url]http://www.cainiao8.com/web/js_examples/13_tuozhuai.html[/url]

為什麼要實作這個拖拽效果？

菜鳥一直比較好奇JavaScript的拖拽是怎麼實作的，剛剛進入大四，閑時間又多了，突然想起一探JS拖拽的究竟。百度搜尋到了藍色的一篇文章“怎麼用javascript進行拖拽”，英文原文為“How to Drag and Drop in JavaScript”。文章比我想象的複雜，僅僅是獲得滑鼠事件的x、y的絕對位置就寫了一頁（我的想法是拖拽根本就不需要得到準确的滑鼠絕對位置），還要考慮浏覽器之間的相容性。最郁悶的是測試了一下，第一個顯示滑鼠位置的例子在IE下和FF下就不一緻了。

索性決定按照自己的思路來實作拖拽效果。很幸運，試驗成功了，也就有了下面的代碼。

實作拖拽的基本思路

拖拽的基本原理就是根據滑鼠的移動來移動被拖拽的元素。滑鼠的移動也就是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代碼

<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代碼

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

JS拖拽的實際效果

[url=http://www.cainiao8.com/web/js_examples/tuozhuai_ex.html]點選進入示例網頁[/url]

缺點與待完善之處

這個拖拽的例子還相當不完善，不過已經實作了拖拽最根本的核心。想到的待完善部分有下面幾點：獲得元素的x與y坐标的方法在本文裡簡化掉了；本文隻讓一個固定的元素具有了拖拽功能，靈活性太差；滑鼠樣式沒有變換；快速的“亂甩拖拽”有一定機率出現問題。其中最後一個問題暫時不知道怎麼解決，前面三個比較好辦。

JavaScript拖拽系列

1. JavaScript拖拽

2. JavaScript拖拽2——多元素、分離JS

3. JavaScript拖拽3——解決快速拖拽的問題

4. JavaScript拖拽4——獲得元素的位置

5. JavaScript拖拽5——性能優化

6. JavaScript拖拽6——修複錯誤