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

使用了触发对象后，进行移动的还是拖放对象，只是用触发对象来触发拖放（一般的使用是把触发对象放到拖放对象里面）。

【范围限制】

要设置范围限制必须先把Limit设为true。范围限制分两种，分别是固定范围和容器范围限制，主要在Move程序中设置。

原理是当比较的值超过范围时，修正left和top要设置的值使拖放对象能保持在设置的范围内。

【固定范围限制】

容器范围限制就是指定上下左右的拖放范围。

各个属性的意思是：

上(mxTop)：top限制；

下(mxBottom)：top+offsetHeight限制；

左(mxLeft)：left限制；

右(mxRight)：left+offsetWidth限制。

如果范围设置不正确，可能导致上下或左右同时超过范围的情况，所以要在Start程序中进行修正：

this.mxRight=Math.max(this.mxRight,this.mxLeft+this.Drag.offsetWidth);
this.mxBottom=Math.max(this.mxBottom,this.mxTop+this.Drag.offsetHeight);

其中mxLeft+offsetWidth和mxTop+offsetHeight分别是mxRight和mxBottom的最小范围值。

根据范围参数修正移动参数：

iLeft=Math.max(Math.min(iLeft,mxRight-this.Drag.offsetWidth),mxLeft);
iTop=Math.max(Math.min(iTop,mxBottom-this.Drag.offsetHeight),mxTop);

对于左边上边要取更大的值，对于右边下面就要取更小的值。

【容器范围限制】

容器范围限制的意思就是把范围限制在一个容器_mxContainer内。

要注意的是拖放对象必须包含在_mxContainer中，因为程序中是使用相对定位来设置容器范围限制的（如果是在容器外就要用绝对定位，这样处理就比较麻烦了），还有就是容器空间要比拖放对象大，这个就不用说明了吧。