WEB开发网
开发学院网页设计JavaScript JavaScript 拖放效果 —— 小拖放也有大智慧 阅读

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

 2010-09-14 13:25:12 来源:WEB开发网   
核心提示: 使用了触发对象后,进行移动的还是拖放对象,JavaScript 拖放效果 —— 小拖放也有大智慧(3),只是用触发对象来触发拖放(一般的使用是把触发对象放到拖放对象里面),【范围限制】要设置范围限制必须先把Limit设为true,这样处理就比较麻烦了),还有就是容器空间要比拖放对象大,范围

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

【范围限制】

要设置范围限制必须先把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中,因为程序中是使用相对定位来设置容器范围限制的(如果是在容器外就要用绝对定位,这样处理就比较麻烦了),还有就是容器空间要比拖放对象大,这个就不用说明了吧。

上一页  1 2 3 4 5 6 7 8  下一页

Tags:JavaScript 效果 智慧

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接