当前位置:编程学习 > C#/ASP.NET >>

可移动DIV在火狐的某些环境下不能移动

在网上找了一段代码,能实现可移动的div,兼容IE和火狐的,我试了没问题。可当我把代码加进我的项目的时间,火狐中出问题了,div不能移动了。然后我单独把那段代码copy出来,火狐中又是好的。我想可能是项目中的其他代码影响了,但是检查了很久也没找出原因来。以下是我的全部代码,请高手指点一二:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>采购进货单</title>
    <script src="JS/wpCalendar.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        var _IsMousedown = 0;
        var _ClickLeft = 0;
        var _ClickTop = 0;
        function moveInit(divID, evt) {
            _IsMousedown = 1;
            if (getBrowserType() == "NSupport") {
                return;
            }
            var obj = getObjById(divID);
            if (getBrowserType() == "fox") {
                _ClickLeft = evt.pageX - parseInt(obj.style.left);
                _ClickTop = evt.pageY - parseInt(obj.style.top);
            } else {
                _ClickLeft = evt.x - parseInt(obj.style.left);
                _ClickTop = evt.y - parseInt(obj.style.top);
            }
        }
        function Move(divID, evt) {
            if (_IsMousedown == 0) {
                return;
            }
            var objDiv = getObjById(divID);
            if (getBrowserType() == "fox") {
                objDiv.style.left = evt.pageX - _ClickLeft;
                objDiv.style.top = evt.pageY - _ClickTop;
            }
            else {
                objDiv.style.left = evt.x - _ClickLeft;
                objDiv.style.top = evt.y - _ClickTop;
            }

        }
        function stopMove() {
            _IsMousedown = 0;
        }
        function getObjById(id) {
            return document.getElementById(id);
        }
        function getBrowserType() {
            var browser = navigator.appName
            var b_version = navigator.appVersion
            var version = parseFloat(b_version)
            //alert(browser);
            if ((browser == "Netscape")) {
                return "fox";
            }
            else if (browser == "Microsoft Internet Explorer") {
                if (version >= 4) {
                    return "ie4+";
                }
                else {
                    return "ie4-";
                }
            }
            else {
                return "NSupport";
            }
        }

        function codeinput(obj,event) {
            if (event.keyCode == 13) {
                obj.value = "";
                alert("条码输入成功");
            }
        }
        
        function getChildNodes(obj) {
            var childnodes=new Array();
            var childS = obj.childNodes;
            for (var i = 0; i < childS.length; i++) {
                if (childS[i].nodeType == 1)
                    childnodes.push(childS[i]);
            }
            return childnodes;
        };
        function turndiv(obj) {
            var ul = obj.parentNode;
            var lis = getChildNodes(ul);
            var divs = getChildNodes(document.getElementById("container"));
            for (var i = 0; i < lis.length; i++) {
                if (lis[i] == obj) {
                    lis[i].style.backgroundColor = "#ffffff";
                    divs[i].style.display = "block";
                }
                else {
                    lis[i].style.backgroundColor = "#f7f7ef";
                    divs[i].style.display = "none";
                }
            }
        }
        function showdiv(obj) {
            var div = obj.parentNode.getElementsByTagName("div")[0];
            if (div.className == "divhid") {
                div.className = "divmore";
            }
            else {
                div.className = "divhid";
            }
            
        }
    </script>
    <link href="css/loyout.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #ultool
        {
            list-style:none;
            padding:0px;
            margin:0px;
            height:25px;
        }
        #ultool li
        {
            float:left;
            text-align:center;
            height:25px;
            width:150px;
            line-height:25px;
            font-weight:bold;
            display:block;
            cursor:pointer;
            background-color:#f7f7ef;
        }
        .divcontainer
        {
            width:100%;
            height:600px;
            margin-top:8px;
        }
        .nav
        {
            clear:both;
            width:100%;
            height:8px;
            overflow:hidden;
        }
        .divhid
        {
            display:none;
        }
        .divmore
        {
            border:solid 2px #aaaaaa;
        background-color:#e0e0e0; 
        display:block; 
        position:absolute; 
        overflow:auto;
        width:300px;
        height:100px;
        }
        .tdright
        {
            text-align:right;
        }
        .tdleft
        {
            text-align:left;
        }
        .txb
        {
            border:none;
            border-bottom:solid 1px black;
            width:160px;
            background-color:#f7f7ef;
        }
        .link
        {
            width:100px;
            text-align:center;
            height:25px;
            display:block;
            background-color:Yellow;
            line-height:25px;
            margin-left:10px;
            text-decoration:none;
            color:Black;
            border:solid 1px #e0e0e0;
        }
        .link:visited
        {
            width:100px;
            text-align:center;
            height:25px;
            display:block;
            background-color:Yellow;
            line-height:25px;
            margin-left:10px;
            text-decoration:none;
            color:Black;
            border:solid 1px #e0e0e0;
        }
        .link:hover
        {
            width:100px;
            text-align:center;
            height:25px;
            display:block;
            background-color:Yellow;
            line-height:25px;
            margin-left:10px;
            text-decoration:none;
            color:Red;
            border:solid 1px #e0e0e0;
            position:relative;
            top:1px;
            left:1px;
        }
        .tdtitle
        {
            height:25px;
            vertical-align:middle;
            background-color:White;
            border:solid 1px #a0a0a0;
        }
        .alink
        {
            width:60px;
            text-align:center;
            height:25px;
            line-height:25px;
            text-decoration:none;
            color:blue;
        }
        .alink:visited
        {
            width:60px;
            text-align:center;
            height:25px;
            line-height:25px;
            text-decoration:none;
            color:blue;
        }
        .alink:hover
        {
            width:60px;
            text-align:center;
            height:25px;
            line-height:25px;
            text-decoration:none;
            color:Red;
        }
    </style>
</head>

(接下面) --------------------编程问答--------------------

<body>
    <form id="form1" runat="server">
    <div>
        <div id="movediv" style=" cursor:move; height:35px; line-height:35px; position:absolute; width:263px; background-image:url(Images/movel.jpg); top:190px; left:700px;"
            onmousedown="moveInit('movediv',event);" onmousemove="Move('movediv',event)" onmouseup="stopMove()" onmouseout="stopMove()">
            <span style="height:35px; line-height:35px; margin-left:20px">条码:</span>
            <asp:TextBox ID="TxbCode" onkeydown="codeinput(this,event)" runat="server"></asp:TextBox>
        </div>
        <ul id="ultool">
            <li onclick="turndiv(this)" style=" background-color:#ffffff;">采购进货</li>
            <li onclick="turndiv(this)">待审核采购单(订单)</li>
        </ul>
        <div id="container">
            <div class="divcontainer">
                <div style="width:100%;">
                    <table style="width:100%;">
                        <tr>
                            <td style="width:25%;">
                            
                            </td>
                            <td style="width:50%; text-align:center; vertical-align:middle;">
                                <h2 style="vertical-align:middle;">采购进货</h2>
                            </td>
                            <td style="width:25%; text-align:center; color:Red;">
                                单号:<asp:Label ID="LabOrderNum" runat="server" ForeColor="Red" Text="CJ2011111800001"></asp:Label>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="nav"></div>
                <div style="width:100%;">
                <fieldset>
                    <table style="width:100%; height:50px;">
                        <tr>
                            <td class="tdright">
                                供应商:
                            </td>
                            <td class="tdleft">    
                            <asp:TextBox ID="TxbSupplier" CssClass="txb" runat="server"></asp:TextBox>
                             
                                <input id="btnshowsupplier" type="button" value="..." onclick="showdiv(this)" />
                                <br />
                                <div class="divhid">
                                    <table>
                                        <tr>
                                            <td>
                                                123
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                456
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                789
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                            <td class="tdright">
                                收货仓库:
                            </td>
                            <td class="tdleft">
                                <asp:DropDownList ID="DrpStorage" CssClass="txb" runat="server">
                                </asp:DropDownList>
                            </td>
                            <td class="tdright">
                                收货日期:
                            </td>
                            <td class="tdleft">
                                <asp:TextBox ID="TxbReceiveDate" onfocus="showCalendar(this)" CssClass="txb" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                    </fieldset>
                </div>
                <div class="nav"></div>
                <div style="width:100%;">
                    <fieldset>
                        <table>
                            <tr>
                                <td style="height:40px;" valign="middle">
                                    <a href="#" class="link">添加老商品</a>
                                </td>
                                <td style="height:40px;" valign="middle">
                                    <a href="#" class="link">添加新商品</a>
                                </td>
                                <td style="height:40px;" valign="middle">
                                    <a href="#" class="link">导入</a>
                                </td>
                                <td style="height:40px;" valign="middle">
                                    <a href="#" class="link">导出</a>
                                </td>
                                <td>
                                    <div style="width:200px; text-align:center;">
                                        <a href="#" class="alink">修改</a>  
                                        <a href="#" class="alink">删除</a>  
                                        <a href="#" class="alink">打印</a>  
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </div>
                <div class="nav"></div>
                <div style="width:100%; border:solid 1px #555;">
                    <fieldset>
                        <div style="width:100%;">
                            <div style=" width:100%; height:25px;">
                                <table style="width:100%; border-collapse:collapse; padding:0px;">
                                    <tr>
                                        <td class="tdtitle" style="width:20px;">
                                       
                                        </td>
                                        <td class="tdtitle" style="width:200px;">
                                                                                商品名称</td>
                                        <td class="tdtitle" style="width:50px;">
                                                                                单位</td>
                                        <td class="tdtitle" style="width:200px;">
                                                                                规格型号</td>
                                        <td class="tdtitle" style="width:150px;">
                                                                                颜色</td>
                                        <td class="tdtitle" style="width:100px;">
                                                                                单价</td>
                                        <td class="tdtitle" style="width:80px;">
                                                                                数量</td>
                                        <td class="tdtitle" style="width:100px;">
                                                                                总金额</td>
                                    </tr>
                                </table>
                            </div>
                        
                            <div style="width:100%; height:300px; overflow:auto; border-style:inset;">
                                <table id="GoodsList" style="width:100%; border-collapse:collapse; padding:0px;">
                                    
                                </table>
                            </div>
                            
                            <div style="width:100%;">
                                <table id="GoodsTotal" style="width:100%; border-collapse:collapse; padding:0px;">
                                    <tr>
                                        <td class="tdtitle" style="width:20px;">
                                       
                                        </td>
                                        <td class="tdtitle" style="width:200px;">
                                                                                </td>
                                        <td class="tdtitle" style="width:50px;">
                                                                                </td>
                                        <td class="tdtitle" style="width:200px;">
                                                                                </td>
                                        <td class="tdtitle" style="width:150px;">
                                                                                </td>
                                        <td class="tdtitle" style="width:100px;">
                                                                                </td>
                                        <td class="tdtitle" style="width:80px;">
                                                                                </td>
                                        <td class="tdtitle" style="width:100px;">
                                                                                </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="nav"></div>
--------------------编程问答--------------------

<div style="width:100%;">
                    <table style="width:100%">
                        <tr>
                            <td class="tdright">
                                应付金额:
                            </td>
                            <td class="tdleft">
                                <asp:TextBox ID="TxbDealAmount" CssClass="txb" runat="server"></asp:TextBox>
                            </td>
                            <td class="tdright">
                                实付金额:
                            </td>
                            <td class="tdleft">
                                <asp:TextBox ID="TxbRealAmount" CssClass="txb" runat="server"></asp:TextBox>
                            </td>
                            <td class="tdright">
                                经办人:
                            </td>
                            <td class="tdleft">
                                <asp:DropDownList CssClass="txb" ID="DrpPasser" runat="server">
                                </asp:DropDownList>
                            </td>
                            <td>
                                原始单号:
                            </td>
                            <td>
                                <asp:TextBox ID="TxbOrigin" CssClass="txb" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="tdright" style=" height:25px;" valign="middle">
                                备注:
                            </td>
                            <td colspan="5">
                                <div class="divhid">
                                    <table>
                                        <tr>
                                            <td>
                                                123
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                456
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                789
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <asp:TextBox ID="TxbRemarks" style="border:none;border-bottom:solid 1px black;width:450px;background-color:#f7f7ef;" runat="server"></asp:TextBox>
                                <input id="Button1" type="button" value="..." onclick="showdiv(this)" />
                            </td>
                            <td>
                                <asp:LinkButton ID="LnkBtnSave" CssClass="link" BorderColor="#999999" BorderStyle="Outset" Font-Bold="true" runat="server">保存</asp:LinkButton>
                            </td>
                            <td>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="divcontainer" style="display:none;">
                待审核采购单(订单)
            </div>
        </div>
    </div>
    </form>
</body>
</html>

抱歉,这里我只能把全部代码列出来,因为我不知道到底是哪段出了问题。 --------------------编程问答-------------------- 可移动的div就是Body下的第二个ID为“movediv”的div
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,