如何制作拖拽的效果

时间：2014-2-21

  拖动功能并不像想象的那样很难实现,只要认真分析拖动的过程,就不难理解其中的原理,完成一次拖拽过程主要有3个环节.
1.当在需要拖动的元素上按下鼠标时,调用mousedown事件,可以获得拖动元素的初始位置,并为这个对象注册mouseover事件;
2.当拖动元素时调用mouseover事件,首先获得鼠标的位置,然后改变拖动元素的位置;
3.当鼠标释放时调用mouseup事件,获得结束拖动时的鼠标位置,如果需要窗口来接收拖动的元素,则需要判断是否能接收,如果不能接收,要使拖动对象恢复到拖动前的位置,最后要删除这个元素的mouseover事件.
  为了使拖动对象在移动位置的过程中显示出不同的效果,在触发每一次事件时都要设置元素的style属性,这样会使拖拽看起来更具有动感.