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