Js拖动的原理

js的拖拽效果主要作用到一下三个事件:

1.mousedown 鼠标按下事件

2.mousemove 鼠标移动事件

3.mouseup 鼠标抬起事件

   当点击 dom 的时候,记录当前鼠标的坐标值,也就是x\y值,以及被拖拽的dom的top\left值,而且还要在鼠标按下的回调函数里添加鼠标移动的事件:document.addEventListener("mousemove",moving,false)
   和添加鼠标抬起的事件
   document.addEventListener("mouseup",function()){
   document.removeEventListener("mousemove",moving,false)},false)
   这个抬起的事件是为了解除鼠标移动的监听,因为只有在鼠标按下才可以拖拽,抬起就停止不会移动了.
   当鼠标按下移动的时候,记录移动中的x\y,那么这个被拖拽的dom的top和left值就是
   top=鼠标按下时记录的dom的top值+(移动中的y值-鼠标按下时的y值)
   left=鼠标按下时记录的dom的left值+(移动中的x值-鼠标按下时的x值)