javascript实现拖拽的原理

1.拖拽的基本原理：当mousedown时，记下鼠标单击位置离拖拽容器左边沿的距离和上边沿的距离，即tmpX/tmpY；当mousemove时，通过定位拖拽容器的style.left/style.top，使拖拽容器进行移动，定位到哪里则由刚刚的tmpX/tmpY和当前鼠标所在的位置计算得出；当mouseup时，结束移动。

2.“var dragObj=this;”这句是为了在mousedown/mouseup/mousemove事件里对Drag对象的相关变量进行引用。因为在mousedown里的this是titleBar，而mouseup/mousemove里的this是document。

3.当拖拽速度太快导致鼠标移出拖拽容器，而拖拽容器位置未变时，用document.mousemove代替titleBar.mousemove即可。

4.设置拖拽容器可拖拽的范围，若未设置，则默认为当前窗口可视范围。在设置范围时使用Math.max/min来处理，而不是用if语句判断，用后者的话会导致快速拖拽时未达到容许范围边沿即停止的状况。

5.在拖拽过程中，可设置是否保留原来拖拽容器，当拖拽结束时，隐藏原来容器，默认不保留。

6.当拖拽时，可设置拖拽的容器是否透明及透明度是多少，默认为不透明。但若拖拽过程中设置保留原来拖拽容器，即keepOrigin:true，则设置透明度为50%。

7.单击鼠标右键、鼠标中键等不能拖动，仅单击鼠标左键可以拖动。IE鼠标左键为event.Button=1；Firefox鼠标左键为event.Button=0。

8.解决单击图片无法拖拽的问题：IE通过ev.returnValue=false来防止图片的事件，注意是放在document.onmousemove中，而Firefox通过ev.preventDefault();ev.stopPropagation();来防止图片的事件，但是却放在titleBar的mousedown事件中。

9.有一种情况，当浏览器窗口不是最大化时，你希望鼠标在浏览器外移动时浏览器里的拖拽容器仍然移动，这时就要使用鼠标事件捕获，IE中相应的是dragdiv.setCapture();与dragdiv.releaseCapture();而Firefox中相应的是window.captureEvents(Event.mousemove);与window.releaseEvents(dragdiv.mousemove)。

10.确保当每次拖拽时，拖拽容器中的z-index都不会被其他块元素覆盖。