随笔 - 154  文章 - 60  trackbacks - 0
<2007年12月>
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

声明:

该blog是为了收集资料,认识朋友,学习、提高技术,所以本blog的内容除非声明,否则一律为转载!!

感谢那些公开自己技术成果的高人们!!!

支持开源,尊重他人的劳动!!

常用链接

留言簿(3)

随笔分类(148)

随笔档案(143)

收藏夹(2)

其他

学习(技术)

观察思考(非技术)

搜索

  •  

最新评论

阅读排行榜

评论排行榜

代码:
<html>
<head>
<title>DRAG the DIV</title>
<style>
*
{font-size:12px}
.dragTable
{
    font-size
:12px;
    border-top
:1px solid #3366cc;
    margin-bottom
: 10px;
    width
:100%;
    background-color
:#FFFFFF;
}

.dragTR
{
    cursor
:move;
    color
:#7787cc;
    background-color
:#e5eef9;
}

td
{vertical-align:top;}
#parentTable
{
    border-collapse
:collapse;
    letter-spacing
:25px;
}

</style>
<script defer>
/****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/
    
var draged=false;
    tdiv
=null;
function dragStart(){
    ao
=event.srcElement;
    
if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;
    
else return;
    draged
=true;
    tdiv
=document.createElement("div");
    tdiv.innerHTML
=ao.outerHTML;
    tdiv.style.display
="block";
    tdiv.style.position
="absolute";
    tdiv.style.filter
="alpha(opacity=70)";
    tdiv.style.cursor
="move";
    tdiv.style.width
=ao.offsetWidth;
    tdiv.style.height
=ao.offsetHeight;
    tdiv.style.top
=getInfo(ao).top;
    tdiv.style.left
=getInfo(ao).left;
    document.body.appendChild(tdiv);
    lastX
=event.clientX;
    lastY
=event.clientY;
    lastLeft
=tdiv.style.left;
    lastTop
=tdiv.style.top;
    
try{
        ao.dragDrop();    
    }
catch(e){}
}

function draging(){//重要:判断MOUSE的位置
    if(!draged)return;
    
var tX=event.clientX;
    
var tY=event.clientY;
    tdiv.style.left
=parseInt(lastLeft)+tX-lastX;
    tdiv.style.top
=parseInt(lastTop)+tY-lastY;
    
for(var i=0;i<parentTable.cells.length;i++){
        
var parentCell=getInfo(parentTable.cells[i]);
        
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
            
var subTables=parentTable.cells[i].getElementsByTagName("table");
            
if(subTables.length==0){
                
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
                    parentTable.cells[i].appendChild(ao);
                }

                
break;
            }

            
for(var j=0;j<subTables.length;j++){
                
var subTable=getInfo(subTables[j]);
                
if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
                    parentTable.cells[i].insertBefore(ao,subTables[j]);
                    
break;
                }
else{
                    parentTable.cells[i].appendChild(ao);
                }
    
            }

        }

    }

}


function dragEnd(){
    
if(!draged)return;
    draged
=false;
    mm
=ff(150,15);
}

function getInfo(o){//取得坐标
    var to=new Object();
    to.left
=to.right=to.top=to.bottom=0;
    
var twidth=o.offsetWidth;
    
var theight=o.offsetHeight;
    
while(o!=document.body){
        to.left
+=o.offsetLeft;
        to.top
+=o.offsetTop;
        o
=o.offsetParent;
    }

        to.right
=to.left+twidth;
        to.bottom
=to.top+theight;
    
return to;
}

function ff(aa,ab){//从GOOGLE网站来,用于恢复位置
    var ac=parseInt(getInfo(tdiv).left);
    
var ad=parseInt(getInfo(tdiv).top);
    
var ae=(ac-getInfo(ao).left)/ab;
    
var af=(ad-getInfo(ao).top)/ab;
    
return setInterval(function(){if(ab<1){
                            clearInterval(mm);
                            tdiv.removeNode(
true);
                            ao
=null;
                            
return
                        }

                    ab
--;
                    ac
-=ae;
                    ad
-=af;
                    tdiv.style.left
=parseInt(ac)+"px";
                    tdiv.style.top
=parseInt(ad)+"px"
                }

,aa
/ab)
}

function inint(){//初始化
    for(var i=0;i<parentTable.cells.length;i++){
        
var subTables=parentTable.cells[i].getElementsByTagName("table");
        
for(var j=0;j<subTables.length;j++){
            
if(subTables[j].className!="dragTable")break;
            subTables[j].rows[
0].className="dragTR";
            subTables[j].rows[
0].attachEvent("onmousedown",dragStart);
            subTables[j].attachEvent(
"ondrag",draging);
            subTables[j].attachEvent(
"ondragend",dragEnd);
        }

    }

}

inint();
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
<tr >
    
<td width="25%" valgin="top">
        
<table border=0 class="dragTable" cellspacing="0">
            
<tr>
                
<td><b>GMAIL</b></td>
            
</tr>
            
<tr>
                
<td>暂时无法显示GMAIL内容</td>
            
<tr>
        
</table><table border=0 class="dragTable" cellspacing="0">
            
<tr>
                
<td>新浪体育</td>
            
</tr>
            
<tr>
                
<td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖:辛吉斯欣喜能以冠军起步 印度搭档创下纪录法新社前瞻冬奥短道速滑:中韩唱主角 美加施冷箭</td>
            
<tr>
        
</table><table border=0 class="dragTable" cellspacing="0">
            
<tr>
                
<td>焦点</td>
            
</tr>
            
<tr>
                
<td>京广线中断4小时20临客返汉晚点
中国新闻网-湖北分社 - 所有 235 相关报道 ?哈马斯已有总理人选
解放日报报业集团 - 所有 489 相关报道 ?陈水扁是两岸关系麻烦制造者
武汉晨报 - 所有 179 相关报道 ?
</td>
            
<tr>
        
</table>
    
</td>
    
<td width="25%">
        
<table border=0 class="dragTable" cellspacing="0">
            
<tr>
                
<td>中关村在线</td>
            
</tr>
            
<tr>
                
<td>新年行情速递 双敏板卡低价推荐 终于等到了,映泰6600GT一降降一百 罗技G15游戏键盘热力促销,代购价仅529元 </td>
            
<tr>
        
</table></td>
    
<td width="25%">
        
<table border=0 class="dragTable" cellspacing="0">
            
<tr>
                
<td>网易商业</td>
            
</tr>
            
<tr>
                
<td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
            
<tr>
        
</table>
    
</td>
</tr>
</table>
</body>
</html>
posted on 2007-12-06 11:34 lk 阅读(355) 评论(0)  编辑  收藏 所属分类: ajax&jshtml

只有注册用户登录后才能发表评论。


网站导航: