查看文章 |
对google个性主页的拖拽效果的js的完整注释-1(强烈推荐)
2006年11月14日 星期二 下午 04:36
// 工具类,使用Util的命名空间,方便管理 var Util = new Object(); // 获取http header里面的UserAgent,浏览器信息 Util.getUserAgent = navigator.userAgent; // 是否是Gecko核心的Browser,比如Mozila、Firefox Util.isGecko = Util.getUserAgent.indexOf( " Gecko " ) != - 1 ; // 是否是Opera Util.isOpera = Util.getUserAgent.indexOf( " Opera " ) != - 1 ; // 获取一个element的offset信息,其实就是相对于Body的padding以内的绝对坐标 // 后面一个参数如果是true则获取offsetLeft,false则是offsetTop // 关于offset、style、client等坐标的定义参考dindin的这个帖子:http://www.jroller.com/page/dindin/?anchor=pro_javascript_12 Util.getOffset = function (el, isLeft) { var retValue = 0 ; while (el != null ) { retValue += el[ " offset " + (isLeft ? " Left " : " Top " )]; el = el.offsetParent; } return retValue; }; // 将一个function(参数中的funcName是这个fuction的名字)绑定到一个element上,并且以这个element的上下文运行,其实是一种继承,这个可以google些文章看看 Util.bindFunction = function (el, fucName) { return function () { return el[fucName].apply(el, arguments); }; }; // 重新计算所有的可以拖拽的element的坐标,对同一个column下面的可拖拽图层重新计算它们的高度而得出新的坐标,防止遮叠 // 计算出来的坐标记录在pagePosLeft和pagePosTop两个属性里面 Util.re_calcOff = function (el) { for ( var i = 0 ; i < Util.dragArray.length; i ++ ) { var ele = Util.dragArray[i]; ele.elm.pagePosLeft = Util.getOffset(ele.elm, true ); ele.elm.pagePosTop = Util.getOffset(ele.elm, false ); } var nextSib = el.elm.nextSibling; while (nextSib) { nextSib.pagePosTop -= el.elm.offsetHeight; nextSib = nextSib.nextSibling; } }; // 隐藏Google Ig中间那个table,也就是拖拽的容器,配合show一般就是刷新用,解决一些浏览器的怪癖 Util.hide = function () { Util.rootElement.style.display = " none " ; }; // 显示Google Ig中间那个table,解释同上 Util.show = function () { Util.rootElement.style.display = "" ; }; // 移动时显示的占位虚线框 ghostElement = null ; // 获取这个虚线框,通过dom动态生成 getGhostElement = function () { if ( ! ghostElement) { ghostElement = document.createElement( " DIV " ); ghostElement.className = " modbox " ; ghostElement.backgroundColor = "" ; ghostElement.style.border = " 2px dashed #aaa " ; ghostElement.innerHTML = " " ; } return ghostElement; }; |
最近读者: