JavaScript 拖放效果 —— 小拖放也有大智慧

原理跟固定范围限制差不多，只是范围参数是根据容器的属性的设置的。

当设置了容器，会自动把position设为relative来相对定位：

!this._mxContainer||CurrentStyle(this._mxContainer).position=="relative"||(this._mxContainer.style.position="relative");

注意relative要在获取offsetLeft和offsetTop即设置_x和_y之前设置，offset才能正确获取值。

由于是相对定位，对于容器范围来说范围参数上下左右的值分别是0、clientHeight、0、clientWidth。

clientWidth和clientHeight是容器可视部分的宽度和高度（详细参考这里）。

为了容器范围能兼容固定范围的参数，程序中会获取容器范围和固定范围中范围更小的值：

Code
mxLeft=Math.max(mxLeft,0);
mxTop=Math.max(mxTop,0);
mxRight=Math.min(mxRight,this._mxContainer.clientWidth);
mxBottom=Math.min(mxBottom,this._mxContainer.clientHeight);

要注意如果在程序执行之前设置过拖放对象的left和top而容器没有设置relative，在自动设置relative时会发生移位现象，所以尽量避免没有设置relative而又设置了拖放对象left和top，才执行程序的情况。

不过也有一个取巧的方法就是设置margin来代替定位（使用margin的话会自动修正，后面说明）。

因为设置相对定位的关系，容器_mxContainer设置过后一般不要取消或修改，否则很容易造成移位异常。

【鼠标捕获】

我在一个拖放实例中看到，即使鼠标移动到浏览器外面，拖放程序依然能够执行，仔细查看后发现是用了setCapture。

鼠标捕获(setCapture)是这个程序的重点，作用是将鼠标事件捕获到当前文档的指定的对象。这个对象会为当前应用程序或整个系统接收所有鼠标事件。