chump2877
01-12-2007, 06:24 AM
I wrote the following script, but it's giving me an error in IE and I can;t figure out why:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
<head>
<title>Drag-and-Drop Demo</title>
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
<!--
#div1, #div2, #div3
{
position:absolute;
background-color:#eee;
border:1px solid #000;
cursor:move;
}
#div1 p, #div2 p, #div3 p
{
font:bold 12px Verdana, Arial;
text-align:center;
margin-top:30px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
<!--
var divObj;
var pxFromLeft;
var pxFromTop;
var x;
var y;
function dragIt(id,event)
{
if (document.getElementById(id) != divObj)
{
var divContainer = document.getElementById("container");
var myDivs = divContainer.getElementsByTagName("div");
for (i=0; i<myDivs.length; i++)
{
if (myDivs[i].style.zIndex == 100)
myDivs[i].style.zIndex = 50;
else
myDivs[i].style.zIndex = 0;
}
}
divObj = document.getElementById(id);
divObj.style.zIndex = 100;
pxFromLeft = divObj.offsetLeft;
pxFromTop = divObj.offsetTop;
if (event.pageX || event.pageY)
{
x = event.pageX;
y = event.pageY;
}
else
{
x = event.clientX;
y = event.clientY;
}
var widthArr = divObj.style.width.split("px");
var heightArr = divObj.style.height.split("px");
if (x >= pxFromLeft && x <= pxFromLeft + parseInt(widthArr[0]) && y >= pxFromTop && y <= pxFromTop + parseInt(heightArr[0]))
{
document.onmousemove = dragIt2;
// prevent text selection in IE
document.onselectstart = function()
{
return false;
};
// prevent text selection (except IE)
document.onmousedown = function()
{
if (typeof event.preventDefault != 'undefined')
event.preventDefault();
};
}
}
function dragIt2(event)
{
if (event == null)
event = window.event;
if (event.pageX || event.pageY)
{
var a = event.pageX;
var b = event.pageY;
}
else
{
var a = event.clientX;
var b = event.clientY;
}
if (x > a)
var moveX = -(x - a);
else if (x < a)
var moveX = a - x;
if (y > b)
var moveY = -(y - b);
else if (y < b)
var moveY = b - y;
divObj.style.left = pxFromLeft+moveX+"px";
divObj.style.top = pxFromTop+moveY+"px";
document.onmouseup = dragIt3;
}
function dragIt3()
{
document.onmousemove = null;
document.onselectstart = null;
}
-->
</script>
</head>
<body>
<div id="container">
<div id="div1" style="top:25px;left:25px;width:400px;height:75px" onmousedown="dragIt('div1',event);">
<p>Click and drag me!</p>
</div>
<div id="div2" style="top:125px;left:25px;width:300px;height:75px" onmousedown="dragIt('div2',event);">
<p>Click and drag me!</p>
</div>
<div id="div3" style="top:225px;left:25px;width:200px;height:75px" onmousedown="dragIt('div3',event);">
<p>Click and drag me!</p>
</div>
</div>
</body>
</html>The error in IE is:
Line 120 - Error: Invalid argumentThis is line 120:
divObj.style.left = pxFromLeft+moveX+"px";Any ideas? Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
<head>
<title>Drag-and-Drop Demo</title>
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
<!--
#div1, #div2, #div3
{
position:absolute;
background-color:#eee;
border:1px solid #000;
cursor:move;
}
#div1 p, #div2 p, #div3 p
{
font:bold 12px Verdana, Arial;
text-align:center;
margin-top:30px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
<!--
var divObj;
var pxFromLeft;
var pxFromTop;
var x;
var y;
function dragIt(id,event)
{
if (document.getElementById(id) != divObj)
{
var divContainer = document.getElementById("container");
var myDivs = divContainer.getElementsByTagName("div");
for (i=0; i<myDivs.length; i++)
{
if (myDivs[i].style.zIndex == 100)
myDivs[i].style.zIndex = 50;
else
myDivs[i].style.zIndex = 0;
}
}
divObj = document.getElementById(id);
divObj.style.zIndex = 100;
pxFromLeft = divObj.offsetLeft;
pxFromTop = divObj.offsetTop;
if (event.pageX || event.pageY)
{
x = event.pageX;
y = event.pageY;
}
else
{
x = event.clientX;
y = event.clientY;
}
var widthArr = divObj.style.width.split("px");
var heightArr = divObj.style.height.split("px");
if (x >= pxFromLeft && x <= pxFromLeft + parseInt(widthArr[0]) && y >= pxFromTop && y <= pxFromTop + parseInt(heightArr[0]))
{
document.onmousemove = dragIt2;
// prevent text selection in IE
document.onselectstart = function()
{
return false;
};
// prevent text selection (except IE)
document.onmousedown = function()
{
if (typeof event.preventDefault != 'undefined')
event.preventDefault();
};
}
}
function dragIt2(event)
{
if (event == null)
event = window.event;
if (event.pageX || event.pageY)
{
var a = event.pageX;
var b = event.pageY;
}
else
{
var a = event.clientX;
var b = event.clientY;
}
if (x > a)
var moveX = -(x - a);
else if (x < a)
var moveX = a - x;
if (y > b)
var moveY = -(y - b);
else if (y < b)
var moveY = b - y;
divObj.style.left = pxFromLeft+moveX+"px";
divObj.style.top = pxFromTop+moveY+"px";
document.onmouseup = dragIt3;
}
function dragIt3()
{
document.onmousemove = null;
document.onselectstart = null;
}
-->
</script>
</head>
<body>
<div id="container">
<div id="div1" style="top:25px;left:25px;width:400px;height:75px" onmousedown="dragIt('div1',event);">
<p>Click and drag me!</p>
</div>
<div id="div2" style="top:125px;left:25px;width:300px;height:75px" onmousedown="dragIt('div2',event);">
<p>Click and drag me!</p>
</div>
<div id="div3" style="top:225px;left:25px;width:200px;height:75px" onmousedown="dragIt('div3',event);">
<p>Click and drag me!</p>
</div>
</div>
</body>
</html>The error in IE is:
Line 120 - Error: Invalid argumentThis is line 120:
divObj.style.left = pxFromLeft+moveX+"px";Any ideas? Thanks.