用javascript做拖动布局的思路

2024-05-06 14:17:58

字体：大中小

来源：转载

供稿：网友

好了，转入正文，在开始之前先介绍几个功能函数！
1.格式化事件的函数
代码如下:
function getEvent(){
     //同时兼容ie和ff的写法
     if(document.all)    return window.event;
     func=getEvent.caller;
     while(func!=null){
         var arg0=func.arguments[0];
         if(arg0){
             if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
                || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
                return arg0;
              }
         }
          func=func.caller;
        }
        return null;
}

2.取得鼠标的位置

代码如下:

function mouseCoords(ev){
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}

3.得到元素的位置

代码如下:
function getPosition(ele){
    var left = 0;
    var top = 0;
    while (ele.offsetParent){
        left += ele.offsetLeft;
        top += ele.offsetTop;
        ele = ele.offsetParent;
    }
    left += ele.offsetLeft;
    top += ele.offsetTop;
    return {x:left, y:top};
}

首先，当然是写好初始布局的页面，  查看初始页面效果

上一篇：JavaScript 应用类库代码

下一篇：在B/S开发中经常用到的JavaScript技术第1/3页