可移动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