Javascript制作拖动网页布局的方法

2008-05-30 14:20:46 来源:亮亮的博客 作者:亮亮的博客 点击:

     这几天不是很忙,就找了些拖动布局方面的资料看看,也学着写了个拖动布局的效果,没想到花了好多时间,
七拼八凑,总算是把这个效果写出来了。哎!还是js的功夫太差。因为是边找资料边写的,很多地方印象不深,
时间一长,再重新写估计也难,所以把当时的思路记录一下!也希望大虾指点一下!

好了,转入正文,在开始之前先介绍几个功能函数!
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};
}

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

一般拖动的元素是跟随鼠标的,我的思路是在把拖动的元素增加到一个position为absolute的div中,
鼠标拖动的时候就让它的位置根据鼠标的坐标变化就可以了。所以在页面增加了个onload
程序代码
  
  
var tmpDiv=null;//临时存放拖动对象的div
window.onload=function(){
    tmpDiv=document.createElement("div");
    tmpDiv.style.cssText = 'position:absolute;display:none;border:1px dotted #FFCC66;';
    document.body.appendChild(tmpDiv);
}
9 7 3 1 2 3 4 5 4 8 :


logo

本类最新行业评测技巧教程学院
本类热点本日本周本月
本类推荐本日本周本月

广告联系 | 版权说明 | 意见建议 | 加入收藏 | 军网站群 [ 军软件园 - 军软件商城 - 军软件园论坛 ]

电信与信息服务业务经营许可证:京ICP证050203