js实现拖拽的基本思路

　　拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是的 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代码

16

　　 HTML代码

53

54

我是拖拽示例DIV。

55

可以试验一下效果。

56

演示代码

57

58

59

60

61

62

99

100         

101

102

103

我是拖拽示例DIV。

104

可以试验一下效果。

105

106

107

　　缺点与待完善之处

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