google个性化主页拖拽实现修正版本

google个性化主页拖拽实现修正版本

    忙了两个月的时间.又可以做自己的工作了.上次写的还有很多问题.改进..并完成了读取rss的动作.保存用户信息等功能
js主要由几个部分组成:
1.drag.js:负责拖动的事件
2.dom.js:负责拖动过程中页面节点的变化
3.request.js:主要是读取rss响应的工作

下面是drag.js的部分代码:

drag.js的全部代码
  1/**//*
  2**************************************
  3*        Author By BlackSoul         *
  4*             2006-08-05             *
  5*        BlackSoulylk@gmail.com      *
  6*            QQ:9136194              *
  7*     http://blacksoul.cnblogs.cn    *
  8**************************************
  9*/
 10var tx,ty;
 11var stepX,stepY;
 12
 13//检查位置
 14var aim,module;
 15
 16/**//*-----调用函数之前需要初始化aim为当前模块-----//
 17*    var modules=[1,2,3,4,5,6];
 18*    其中数字代表模块id号.
 19*    主要位置div从左到右为"left","center","right"
 20*    页面当中模块名称为m_1,m_2,m_3.
 21*/
 22
 23function drag(parent,handle){
 24    var clone,isNew=false;
 25    var parentName = parent.getAttribute('id');
 26    parent.firstChild.onmousedown=function(){return false;};
 27    handle.onselectstart = function(){return false;};
 28    handle.onmousedown=function(a){
 29        aim = parent;
 30        var newDiv = document.createElement("div");
 31        newDiv.setAttribute('id','clone');
 32        newDiv.style.display = "none";
 33        document.body.appendChild(newDiv);
 34        clone = document.getElementById("clone");
 35        
 36        clone.style.width = 300;
 37        clone.style.display = "none";
 38        clone.style.position = "absolute";
 39        clone.innerHTML = parent.innerHTML;
 40
 41        clone.style.zIndex = 10000;
 42        clone.style.filter="alpha(opacity=70)";//ie hack
 43        clone.style.opacity = 0.75;
 44        
 45        var d=document;if(!a)a=window.event;
 46        var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
 47
 48        if(parent.setCapture)
 49            parent.setCapture();
 50        else if(window.captureEvents)
 51            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
 52
 53        d.onmousemove=function(a){
 54            parent = document.getElementById(parent.getAttribute('id'));
 55            if(!a)a=window.event;
 56            if(!a.pageX)a.pageX=a.clientX;
 57            if(!a.pageY)a.pageY=a.clientY;
 58            tx=a.pageX-x-document.body.scrollLeft,ty=a.pageY-y+document.body.scrollTop;
 59            
 60            clone.style.left = tx;
 61            clone.style.top = ty;
 62            clone.style.display = "block";
 63            
 64            var aimLeft= aim.parentNode.offsetLeft;
 65            var aimRight = aim.parentNode.offsetLeft + aim.offsetWidth;
 66            var aimTop = aim.parentNode.offsetTop + aim.offsetTop - document.body.scrollTop;
 67            var aimbottom = aim.parentNode.offsetTop + aim.offsetTop + aim.offsetHeight - document.body.scrollTop;
 68            
 69            //这里检测处于目标当中则处理事件
 70            if(a.pageX >= aimLeft && a.pageX <= aimRight
 71                && a.pageY >= aimTop && a.pageY <= aimbottom)
 72            {//处于当前块当中
 73                
 74                appendAfter(aim.getAttribute('id'),parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
 75                document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
 76                deleteNode(parent.getAttribute('id'));
 77                document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
 78                aim = document.getElementById(parent.getAttribute('id'));
 79                return;
 80
 81            }
 82            else
 83            {//否则检测属于哪个模块
 84                for(var i = 0;i < modules.length; i++)
 85                {
 86                    module = document.getElementById("m_"+modules[i]);
 87                    if(a.pageX >= module.parentNode.offsetLeft && a.pageX <= (module.parentNode.offsetLeft + module.offsetWidth)
 88                    && a.pageY >= (module.parentNode.offsetTop + module.offsetTop - document.body.scrollTop)&& a.pageY <= (module.parentNode.offsetTop + module.offsetTop    + module.offsetHeight - document.body.scrollTop))
 89                    {//处于当前块当中
 90                        appendBefore(module.getAttribute('id'),parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
 91                        document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
 92                        deleteNode(parent.getAttribute('id'));
 93                        document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
 94                        aim = module;
 95                        return;
 96                    }
 97                }
 98                
 99                //不属于任何一个位置,属于当前区域之外
100                var left = document.getElementById("left");
101                var center = document.getElementById("center");
102                var right = document.getElementById("right");
103                
104                //左右属于left 上下不属于left
105                if(a.pageX >= left.offsetLeft && a.pageX <= (left.offsetLeft + left.offsetWidth)
106                    &&  a.pageY >= (left.offsetTop + left.offsetHeight + document.body.scrollTop))
107                {
108                    appendLast("left",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
109                    document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
110                    deleteNode(parent.getAttribute('id'));
111                    document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
112                    aim = document.getElementById(parent.getAttribute('id'));
113                    return;
114                }
115                
116                if(a.pageX >= left.offsetLeft && a.pageX <= (left.offsetLeft + left.offsetWidth)
117                    && a.pageY <= left.offsetTop + document.body.scrollTop)
118                {
119                    appendFirst("left",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
120                    document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
121                    deleteNode(parent.getAttribute('id'));
122                    document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
123                    aim = document.getElementById(parent.getAttribute('id'));
124                    return;
125                }
126                
127                //左右属于center 上不属于center
128                if(a.pageX >= center.offsetLeft && a.pageX <= (center.offsetLeft + center.offsetWidth)
129                    &&  a.pageY >= (center.offsetTop + center.offsetHeight+ document.body.scrollTop))
130                {
131                    appendLast("center",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
132                    document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
133                    deleteNode(parent.getAttribute('id'));
134                    document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
135                    aim = document.getElementById(parent.getAttribute('id'));
136                    return;
137                }
138                
139                if(a.pageX >= center.offsetLeft && a.pageX <= (center.offsetLeft + center.offsetWidth)
140                    && a.pageY <= center.offsetTop + document.body.scrollTop)
141                {
142                    appendFirst("center",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
143                    document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
144                    deleteNode(parent.getAttribute('id'));
145                    document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
146                    aim = document.getElementById(parent.getAttribute('id'));
147                    return;
148                }
149                
150                //左右属于right 上不属于right
151                if(a.pageX >= right.offsetLeft && a.pageX <= (right.offsetLeft + right.offsetWidth)
152                    &&  a.pageY >= (right.offsetTop + right.offsetHeight+ document.body.scrollTop))
153                {
154                    appendLast("right",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
155                    document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
156                    deleteNode(parent.getAttribute('id'));
157                    document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
158                    aim = document.getElementById(parent.getAttribute('id'));
159                    return;
160                }
161                
162                if(a.pageX >= right.offsetLeft && a.pageX <= (right.offsetLeft + right.offsetWidth)
163                    && a.pageY <= right.offsetTop + document.body.scrollTop)
164                {
165                    appendFirst("right",parent.getAttribute('id'),"Move_"+parent.getAttribute('id'));
166                    document.getElementById("Move_"+parent.getAttribute('id')).style.border="2px dashed #cc2244";
167                    deleteNode(parent.getAttribute('id'));
168                    document.getElementById("Move_"+parent.getAttribute('id')).setAttribute('id',parentName);
169                    aim = document.getElementById(parent.getAttribute('id'));
170                    return;
171                }
172            }
173
174        };
175
176        d.onmouseup=function(a){
177            if(!a)a=window.event;
178            if(!a.pageX)a.pageX=a.clientX;
179            if(!a.pageY)a.pageY=a.clientY;
180            tx=a.pageX-x,ty=a.pageY-y;
181
182            clone.style.left = tx;
183            clone.style.top = ty;
184            clone.style.zIndex = 1;
185            clone.style.filter="alpha(opacity=100)";//ie hack
186            clone.style.opacity = 1;
187    
188            if(parent.releaseCapture)
189                parent.releaseCapture();
190            else if(window.captureEvents)
191                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
192            d.onmousemove=null;
193            d.onmouseup=null;
194
195            document.getElementById(parent.getAttribute('id')).style.border="1px dashed #999999";
196            //重新注册新节点事件
197            drag(document.getElementById(parent.getAttribute('id')),document.getElementById(handle.getAttribute('id')));
198            document.body.removeChild(clone);
199//            alert("readRss.aspx?left="+getPosition("left")+"&right="+getPosition("right")+"&center="+getPosition("center"));
200            send("Repos.aspx?left="+getPosition("left")+"&right="+getPosition("right")+"&center="+getPosition("center"));
201        };
202    };
203}

    已经发现的bug:以上代码可以在ff下面运行,但是有一个关于坐标的问题,ff的层总是把第一行的y轴当作它自己的y轴..不解..这个是一个bug,
    页面当中调用需要注册层,并且设定三个框架层("left","center","right"),如下:

< div  style ="position:relative; width:935px" >
     < form  id ="Form1"  runat ="server"  action ="#"  style ="border:0px" >
         < asp:TextBox  ID ="tbRssFeeds"  runat ="server"  EnableViewState ="False" ></ asp:TextBox >
         < asp:Button  ID ="addFeeds"  runat ="server"  Text ="添加RSS"  OnClick ="addFeeds_Click"  EnableViewState ="False"   />   
     </ form >
     < div  id ="left"  style ="border:0px" >
         < asp:Literal  ID ="leftSub"  runat ="server" ></ asp:Literal >
     </ div >
    
     < div  id ="center"  style ="border:0px" >
         < asp:Literal  ID ="centerSub"  runat ="server" ></ asp:Literal >
     </ div >
    
     < div  id ="right"  style ="border:0px" >
         < asp:Literal  ID ="rightSub"  runat ="server" ></ asp:Literal >
     </ div >
     < div  style ="position:relative; width:935px" >
     < hr />
    Author:BlackSoul
     </ div >
</ div >

   页面框架好的了之后就是注册事件

< script  language ="javascript"  type ="text/javascript" >

    modules=[1138572788,1028124506,1400846246,1102454511,1498854668,1446864555,1177172025,1126220777];window.onload=function(){drag(document.getElementById('m_1138572788'),document.getElementById('mh_1138572788'));send_request("getRss.aspx?url=http://game.yesky.com/index.xml",'c_1138572788');drag(document.getElementById('m_1028124506'),document.getElementById('mh_1028124506'));send_request("getRss.aspx?url=http://myhard.yesky.com/index.xml",'c_1028124506');drag(document.getElementById('m_1400846246'),document.getElementById('mh_1400846246'));send_request("getRss.aspx?url=http://community.csdn.net/IndexPage/HotLife/HotLife.xml",'c_1400846246');drag(document.getElementById('m_1102454511'),document.getElementById('mh_1102454511'));send_request("getRss.aspx?url=http://rss.xinhuanet.com/rss/it.xml",'c_1102454511');drag(document.getElementById('m_1498854668'),document.getElementById('mh_1498854668'));send_request("getRss.aspx?url=http://www.techtarget.com.cn/index.xml",'c_1498854668');drag(document.getElementById('m_1446864555'),document.getElementById('mh_1446864555'));send_request("getRss.aspx?url=http://column.chinabyte.com/index.xml",'c_1446864555');drag(document.getElementById('m_1177172025'),document.getElementById('mh_1177172025'));send_request("getRss.aspx?url=http://e.yesky.com/index.xml",'c_1177172025');drag(document.getElementById('m_1126220777'),document.getElementById('mh_1126220777'));send_request("getRss.aspx?url=http://telecom.chinabyte.com/index.xml",'c_1126220777');};
    window.onerror = function(){return true;}
</ script >

基本实现了google的定制rss,但是google的module还不能加载...下一步准备实现..
拖拽的代码效果可以查看http://blacksoulylk.googlepages.com/drag.html
aspx读取RSS可以到http://blacksoulylk.googlepages.com/PersonalPage.rar去下载
在下的.net功底比较差,读取rss不知有什么好的方法没有..希望各位大侠不吝赐教