用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頁