...

View Full Version : drag and drop script



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.

david_kw
01-12-2007, 08:02 AM
In the function dragIt2 you are missing the = case for the x/a and y/b tests. So sometimes moveX and moveY are undefined. That appears to be the problem.

david_kw

chump2877
01-12-2007, 08:24 AM
Thanks! :thumbsup:


if (x > a)
var moveX = -(x - a);
else if (x < a)
var moveX = a - x;
else
var moveX = 0;

if (y > b)
var moveY = -(y - b);
else if (y < b)
var moveY = b - y;
else
var moveY = 0;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum