document.write('<p>解析： （1）拖曳的基本原理 ：当 mousedown 时，记下鼠标单击位置离拖曳容器左 边沿的距离和上边沿的距离，即 tmpX/tmpY ；当 mousemove 时，通过定位拖曳 容器的 style.left/style.top，使拖曳容器进行移动，定位到哪里则由刚刚的 tmpX/tmpY 和当前鼠标所在的位置计算得出；当 mouseup 时，结束移动。 （2）&ldquo;var dragObj = this;&rdquo;这句是为了在 mousedown/mouseup/mousemove 事 件里对 Drag 对象的相关变量进行引用。因为在 mousedown 里的 this 是 titleBar, 而 mouseup/mousemove 里的 this 是 document。 （3）当拖曳速度太快导致鼠标移出拖曳容器，而拖曳容器位置未变时，用 document.mousemove 代替 titleBar.mousemove 即可。 （4）设置拖曳容器可拖曳的范围，若未设置，则默认为当前窗口可视范围。 Note ：在设置范围时使用 Math.max/min 来处理，而不是用 if 语句判断，用后者 的话会导致快速拖曳时未达到容许范围边沿即停止的状况。 （5）在拖曳过程中，可设置是否保留原来拖曳容器，当拖曳结束时，隐藏 原来容器，默认不保留。 （6）当拖曳时，可设置拖曳的容器是否透明及透明度是多少，默认为不透 明。但若拖曳过程中设置保留原来拖曳容器，即 keepOrigin: true，则设置透明度 为 50%。 （7）单击鼠标右键、鼠标中键等不能拖动，仅单击鼠标左键可以拖动。 Note：IE 鼠标左键为 event.Button=1；Firefox 鼠标左键为 event.Button=0。 （8） 解决单击图片无法拖曳的问题 ： 非 常&ldquo; 杯 具 &rdquo; 的 是 IE 通 过 ev.returnValue = false 来防止图片的事件，注意是放在 document.onmousemove 中，而 FireFox 通过 ev.preventDefault();ev.stopPropagation(); 来防止图片的事件， 但是却放在 titleBar 的 mousedown 事件中。 （9）有一种情况，当浏览器窗口不是最大化时，你希望鼠标在浏览器外移 动时浏览器里的拖曳容器仍然移动，这时就要使用鼠标事件捕获，IE 中相应的 是 dragdiv.setCapture(); 与 dragdiv.releaseCapture(); 而 Firefor 中相应的是 window. captureEvents(Event.mousemove); 与 window.releaseEvents(dragdiv.mousemove) 。 （10）确保当每次拖曳时，拖曳容器中的 zindex 都不会被其他块元素覆盖。</p>');