DIV层拖动的实现

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
    <meta content="C#" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
   
    <!-- DIV层样式 !-->
   
    <style>
    body{
    margin:0px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    .style1{
    height: 30px;
    margin: 0px auto;
    margin-bottom:20px;
    border:1px solid #96C2F1;
    background-color: #EFF7FF
    }
    .style1 h5{
    margin: 1px;
    background-color: #B2D3F5;
    height: 24px;
    }
    h5{color:#ffffff;margin-left:0px}
    a{color:#000000;text-decoration:none}
    a:hover{color:#666666;text-decoration:underline;}
    .style1 right{
    float:right;border:1px solid #FF0000;
    }
   
    .left
    {
    height: 100px;
    margin: 0px auto;
    margin-bottom:20px;
    border:1px solid #CCEFF5;
    background-color: #FAFCFD
    }
    .center
    {
    height: 100px;
    margin: 0px auto;
    margin-bottom:20px;
    border:1px solid #CCEFF5;
    background-color: #FAFCFD
    }
   
    .content
    {
    margin: 0px auto;
    margin-bottom:20px;
    border:1px solid #FFCC00;
    background-color: #FFFFF7
    }
    </style>
   
    <!-- 弹窗设置 !-->

    <script language="javascript">
     function tc(ab,ac)
     {
         var midwidth = (screen.width - 600) / 2;
         var midheight = (screen.height-500) / 2;
         if(ac==1)
         {
             window.open("../WEB/ViewNews.aspx?ac=1&newid="+ab,"","height=500,width=600,top="+midheight+",left="+midwidth+",toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no")
         }
         if(ac==2)
         {
             window.open("../WEB/ViewNews.aspx?ac=2&newid="+ab,"","height=500,width=600,top="+midheight+",left="+midwidth+",toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no")
         }
     }
    </script>

    <!-- DIV层拖动 !-->

    <script>
        var col = 2;

        var dragobj={}
        var domid=8
        function on_ini()
        {
            String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
            var agent=navigator.userAgent
            window.isOpr=agent.inc("Opera")
            window.isIE=agent.inc("IE")&&!isOpr
            window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE
            if(isMoz)
            {
                Event.prototype.__defineGetter__("x",function(){return this.clientX+2})
                Event.prototype.__defineGetter__("y",function(){return this.clientY+2})
            }
            basic_ini()
        }
        function basic_ini()
        {
            window.$=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}
            window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
        }
        window.οnlοad=function()
        {
            on_ini()
            var o=document.getElementsByTagName("h5")
            for(var i=0;i<o.length;i++)
            {
                o[i].οnmοusedοwn=addevent
            }
        }
        function addevent(e)
        {
            if(dragobj.o!=null)
            return false
            e=e||event
            dragobj.o=this.parentNode
            dragobj.xy=getxy(dragobj.o)
            dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]))
            dragobj.o.style.width=dragobj.xy[2]+"px"
            dragobj.o.style.height=dragobj.xy[3]+"px"
            dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
            dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
            dragobj.o.style.position="absolute"
            var om=document.createElement("div")
            dragobj.otemp=om
            om.style.width=dragobj.xy[2]+"px"
            om.style.height=dragobj.xy[3]+"px"
            dragobj.o.parentNode.insertBefore(om,dragobj.o)
            return false
        }
        document.onselectstart=function(){return false}
        window.οnfοcus=function(){document.onmouseup()}
        window.οnblur=function(){document.onmouseup()}
        document.οnmοuseup=function()
        {
            if(dragobj.o!=null)
            {
                dragobj.o.style.width="auto"
                dragobj.o.style.height="auto"
                dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp)
                dragobj.o.style.position=""
                oDel(dragobj.otemp)
                dragobj={}
            }
        }
        document.οnmοusemοve=function(e)
        {
            e=e||event
            if(dragobj.o!=null)
            {
                dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
                dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
                createtmpl(e)
            }
        }
        function getxy(e)
        {
            var a=new Array()
            var t=e.offsetTop;
            var l=e.offsetLeft;
            var w=e.offsetWidth;
            var h=e.offsetHeight;
            while(e=e.offsetParent)
            {
                t+=e.offsetTop;
                l+=e.offsetLeft;
            }
            a[0]=t;a[1]=l;a[2]=w;a[3]=h
            return a;
        }
        function inner(o,e)
        {
        var a=getxy(o)
            if(e.x>a[1]&&e.x<(a[1]+a[2])&&e.y>a[0]&&e.y<(a[0]+a[3]))
            {
                if(e.y<(a[0]+a[3]/2))
                return 1;
                else
                return 2;
            }
            else
                return 0;
        }
        function createtmpl(e)
        {
            for(var i=0;i<domid;i++)
            {
                if($("m"+i)==dragobj.o)
                continue
                var b=inner($("m"+i),e)
                if(b==0)
                continue
                dragobj.otemp.style.width=$("m"+i).offsetWidth
                if(b==1)
                {
                    $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i))
                }
                else
                {
                    if($("m"+i).nextSibling==null)
                    {
                        $("m"+i).parentNode.appendChild(dragobj.otemp)
                    }else
                    {
                        $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling)
                    }
                }
            return
            }
            for(var j=0;j<col;j++)
            {
                if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV"))
                continue
                var op=getxy($("dom"+j))
                if(e.x>(op[1]+10)&&e.x<(op[1]+op[2]-10))
                {
                    $("dom"+j).appendChild(dragobj.otemp)
                    dragobj.otemp.style.width=(op[2]-10)+"px"
                }
            }
        }
        function add_div()
        {
            var o=document.createElement("div")
            o.className="mo"
            o.id="m"+domid
            $('dom0').appendChild(o)
            o.innerHTML="<h5>dom"+domid+"</h5><div class=nr></div>"
            o.getElementsByTagName("h5")[0].οnmοusedοwn=addevent
            domid++
        }
        function del_div(num)
        {
            var obj;
            obj = $('m' + num);
            oDel('m' + num);
            $('hidden_div').appendChild(obj);
        }
        function show_div(num)
        {
            var obj;
            obj = $('m' + num);
            if (obj.parentNode.id=="hidden_div")
            {
                oDel('m' + num);
                $('dom0').appendChild(obj);
            }
            else
            {
                alert('想什么呢?该层还没隐藏呢~');
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div class="content">
            <table style="width: 100%; height: 100%">
                <tr>
                    <td style="width: 45%" valign="top">
                        <div class="left" id="dom0">
                            <div class="style1" id="m0">
                                <h5 style="cursor:move;">
                                    新闻动态</h5>
                                <div class="nr">
                                    <asp:DataList ID="dgNewsInfo" runat="server" Width="100%">
                                        <ItemTemplate>
                                            <p>
                                                <img height="11" src="images/dot.jpg" width="15">
                                                <a href="javascript:;" οnclick="tc(<%# Eval("i_xw_id") %>,1)">
                                                    <%# Eval("v_xwbt") %>
                                                </a>
                                            </p>
                                        </ItemTemplate>
                                    </asp:DataList>
                                </div>
                            </div>
                            <div class="style1" id="m1">
                                <h5 style="cursor:move;">
                                    电子邮件</h5>
                                <div class="nr">
                                    <asp:Label ID="LbMail" runat="server"></asp:Label></div>
                            </div>
                            <div class="style1" id="m2">
                                <h5 style="cursor:move;">
                                    待办工作</h5>
                                <div class="nr">
                                    <asp:DataList ID="dgAgentWorkInfo" runat="server" Width="100%">
                                        <ItemTemplate>
                                            <p>
                                                <img height="11" src="images/dot.jpg" width="15">
                                                <a href="javascript:;" οnclick="tc(<%# Eval("i_bulletinid") %>)">
                                                    <%# Eval("v-title") %>
                                                </a>
                                            </p>
                                        </ItemTemplate>
                                    </asp:DataList>
                                </div>
                            </div>
                            <div class="style1" id="m4">
                                <h5 style="cursor:move;">
                                    美意视点</h5>
                                <div class="nr">
                                    <asp:DataList ID="dgFC" runat="server" Width="100%">
                                        <ItemTemplate>
                                            <p>
                                                <img height="11" src="images/dot.jpg" width="15">
                                                <a href="javascript:;" οnclick="tc(<%# Eval("i_bulletinid") %>)">
                                                    <%# Eval("v_title") %>
                                                </a>
                                            </p>
                                        </ItemTemplate>
                                    </asp:DataList></div>
                            </div>
                        </div>
                    </td>
                    <td style="width: 45%" valign="top">
                        <div class="center" id="dom1">
                            <div class="style1" id="m3">
                                <h5 style="cursor:move;">
                                    公告通知</h5>
                                <div class="nr">
                                    <asp:DataList ID="dgBulletin" runat="server" Width="100%">
                                        <ItemTemplate>
                                            <p>
                                                <img height="11" src="images/dot.jpg" width="15">
                                                <a href="javascript:;" οnclick="tc(<%# Eval("i_bulletinid") %>,2)">
                                                    <%# Eval("v_title") %>
                                                </a>
                                            </p>
                                        </ItemTemplate>
                                    </asp:DataList>
                                </div>
                            </div>
                            <div class="style1" id="m5">
                                <h5 style="cursor:move;">
                                    公司制度</h5>
                                <div class="nr">
                                    公司制度</div>
                            </div>
                            <div class="style1" id="m6">
                                <h5 style="cursor:move;">
                                    工作日志</h5>
                                <div class="nr">
                                    工作日志</div>
                            </div>
                            <div class="style1" id="m7">
                                <h5 style="cursor:move;">
                                    工作计划</h5>
                                <div class="nr">
                                    工作计划</div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <div id="hidden_div">
            </div>
        </div>
    </form>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值