Menu
Hi,
I am currently learning JavaScript and DHTML and I am trying to figure out how to create drag and drop elements. The code I have written is as follows:
<html>
<head>
<title>Drag and Drop test</title>
<script language=”JavaScript”>
var object=null;
var dX=0;
var dY=0;
function initPage(){
document.onmousedown=pickIt;
document.onmousemove=dragIt;
document.onmouseup=dropIt;
}
function pickIt(e){
if (!e){
e=window.event;
}
var objectID=(e.target)?e.target.id: ((e.srcElement)?e.srcElement.id:null);
if(objectID){
var object=document.getElementById(objectID);
object.style.zIndex=100;
dX=parseInt(e.clientX)-parseInt(object.offsetLeft);
dY=parseInt(e.clientY)-parseInt(object.offsetTop);
return;
}
else{
object=null;
return;
}
}
function dragIt(e){
if (!e){
e=window.event;
}
if (object){
object.style.left=parseInt(e.clientX)-parseInt(dX)+’px’;
object.style.top=parseInt(e.clientY)-parseInt(dY)+’px’;
return false;
}
}
function dropIt(e){
if (!e){
e=window.event;
}
if (object){
object.style.zIndex=0;
object=null;
return false;
}
}
</script>
<style type=”text/css”>
.feature{
cursor:move;
}
</style>
</head>
<body onLoad=”initPage()”>
<span class=”feature”><img id=”body”style=”position:absolute;top:123px;left:400px;zIndex=0;”src=”BODY.GIF”alt=”body”height=”326″width=”225″/></span>
</body>
</html>
the pickIt(e) function, gets the object location on the screen, however this is where everything stops! With the dragIt () function I was hoping to move the object which is has been selected in pickIt, and which now should have a zIndex of 100, and then drop it at a new location with the dropIt function.
Any clues on where I have gone wrong.
thanks,
LF