仿GOOGLE的拖拽效果

今天是：

首页 ┆ 信息查询 ┆ 网站SEO查询工具 ┆ CSS编辑器 ┆ 建站素材

软件新闻

操作系统

Vista Winxp Win2003 Linux Windows综合

工具软件

系统工具媒体工具网络工具杀毒软件聊天

软件开发

C教程 C++ Java C# ASP.NET JSP PHP

数据库

Oracle MySQL DB2 SQL Server Sybase

安全

网络病毒

办公应用

Word Excel Powerpoint Outlook 其他

平面设计

Photoshop Fireworks Coreldraw Flash Illustrator 3dsmax

网站运营

网站运营网站优化网站策划策划书下载建站心得站长故事网站盈利网页制作网页特效 建站素材 免费资源 QQ频道

当前位置：首页 >> 网页制作 >> Javascript/Ajax >> 仿GOOGLE的拖拽效果

发布于2008-03-21 09:33 来源：网海拾贝

仿GOOGLE的拖拽效果

具体代码：

以下是代码片段：
<html>
<head>
<title>DRAG the DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*{font-size:12px}
.dragTable{
    font-size:12px;
    border-top:1px solid #3366cc;
    margin-bottom: 10px;
    width:100%;
    background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
    cursor:move;
    color:#7787cc;
    background-color:#e5eef9;
    height:20px;
    padding-left:5px;
    font-weight:bold;
}
#parentTable{
    border-collapse:collapse;
    letter-spacing:25px;
}
</style>
<script defer>
/****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/
    var Drag={dragged:false,
        ao:null,
        tdiv:null,
dragStart:function(){
    Drag.ao=event.srcElement;
    if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
        Drag.ao=Drag.ao.offsetParent;
        Drag.ao.style.zIndex=100;
    }else
        return;
    Drag.dragged=true;
    Drag.tdiv=document.createElement("div");
    Drag.tdiv.innerHTML=Drag.ao.outerHTML;
    Drag.ao.style.border="1px dashed red";
    Drag.tdiv.style.display="block";
    Drag.tdiv.style.position="absolute";
    Drag.tdiv.style.filter="alpha(opacity=70)";
    Drag.tdiv.style.cursor="move";
    Drag.tdiv.style.border="1px solid #000000";
    Drag.tdiv.style.width=Drag.ao.offsetWidth;
    Drag.tdiv.style.height=Drag.ao.offsetHeight;
    Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
    Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
    document.body.appendChild(Drag.tdiv);
    Drag.lastX=event.clientX;
    Drag.lastY=event.clientY;
    Drag.lastLeft=Drag.tdiv.style.left;
    Drag.lastTop=Drag.tdiv.style.top;
},
draging:function(){//重要:判断MOUSE的位置
    if(!Drag.dragged||Drag.ao==null)return;
    var tX=event.clientX;
    var tY=event.clientY;
    Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
    Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
    for(var i=0;i<parentTable.cells.length;i++){
        var parentCell=Drag.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(Drag.ao);
                }
                break;
            }
            for(var j=0;j<subTables.length;j++){
                var subTable=Drag.getInfo(subTables[j]);
                if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
                    parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
                    break;
                }else{
                    parentTable.cells[i].appendChild(Drag.ao);
                }
            }
        }
    }
}
,
dragEnd:function(){
    if(!Drag.dragged)return;
    Drag.dragged=false;
    Drag.mm=Drag.repos(150,15);
    Drag.ao.style.borderWidth="0px";
    Drag.ao.style.borderTop="1px solid #3366cc";
    Drag.tdiv.style.borderWidth="0px";
    Drag.ao.style.zIndex=1;
},
getInfo:function(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;
},
repos:function(aa,ab){
    var f=Drag.tdiv.filters.alpha.opacity;
    var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
    var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
    var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
    var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
    var kf=f/ab;
    return setInterval(function(){if(ab<1){
                            clearInterval(Drag.mm);
                            Drag.tdiv.removeNode(true);
                            Drag.ao=null;
                            return;
                        }
                    ab--;
                    tl-=kl;
                    tt-=kt;
                    f-=kf;
                    Drag.tdiv.style.left=parseInt(tl)+"px";
                    Drag.tdiv.style.top=parseInt(tt)+"px";
                    Drag.tdiv.filters.alpha.opacity=f;
                }
,aa/ab)
},
inint:function(){//初始化
    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",Drag.dragStart);
        }
    }
    document.onmousemove=Drag.draging;
    document.onmouseup=Drag.dragEnd;
}
//end of Object Drag
}
Drag.inint();
function _show(str){
    var w=window.open('','');
    var d=w.document;
    d.open();
    str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=" $1" $2");
    str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'>< $2></span><br />");
    str=str.replace(/r/g,"<br />n");
    d.write(str);
}
</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万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角美加施冷箭</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>        <table border=0 class="dragTable" cellspacing="0">
            <tr>
                <td>黑可天下</td>
            </tr>
            <tr>
                <td>上海GDP增幅去年出现回落应对反倾销中国鞋企联手对抗欧盟尹家绪操盘南方汽车长安谋求曲线整体境外上市</td>
            <tr>
        </table>
    </td>
</tr>
</table>
<input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />
</body>
</html>

中查找“仿GOOGLE的拖拽效果”更多相关内容

中查找“仿GOOGLE的拖拽效果”更多相关内容

上一篇：网页换肤实例
下一篇：仿yahoo中国右边栏效果css版