Drag and drop + DHTML

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

Figured it out! I had made an error in the pickIt() function. It should read:
function pickIt(e){
if (!e){
e=window.event;
}
var objectID=(e.target)?e.target.id:((e.srcElement)?e.srcElement.id:null);
if (objectID) object=document.getElementById(objectID);
if(objectID){

object.style.zIndex=100;
dX=parseInt(e.clientX)-parseInt(object.offsetLeft);
dY=parseInt(e.clientY)-parseInt(object.offsetTop);
return;

}
else{
object=null;
return;
}
}
In the original verison the I had not give a value to the "object" variable before putting it into the function.

Drag Drop with JavaScript in HTML

I am also teaching myself JS and HTML with a view to creating teaching materials on an intranet basis. I am a qualified Teacher of English as a Foreign Language (TEFL).
I have constructed a simple board game to teach reasoning.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

body { background-color: #AFEEEE; }

div#board { left: 300px; top: 200px; position: absolute; Width: 494px; height: 494px;
border: 3px solid black; color: black; background-color: #FFDEAD; z-index: 0;}
div#sq1, div#sq2,div#sq3, div#sq4
{ width: 60px; height:60px; background-color: yellow; border: 2px solid black;
top: -2px; position: absolute; z-index: 1;}
div#sq1 { left: -2px;} div#sq2 {left: 122px;} div#sq3 {left: 246px;} div#sq4 {left: 370px;}
div#sq5, div#sq6,div#sq7, div#sq8
{ width: 60px; height:60px; background-color: yellow; border: 2px solid black; color: black;
top: 60px; position: absolute; z-index: 1;}
div#sq5 { left: 60px;} div#sq6 {left: 184px;} div#sq7 {left: 308px;} div#sq8 {left: 432px;}
div#sq9, div#sq10,div#sq11, div#sq12
{ width: 60px; height:60px; background-color: yellow; border: 2px solid black; color: black;
top: 122px; position: absolute; z-index: 1;}
div#sq9 { left: -2px;} div#sq10 {left: 122px;} div#sq11 {left: 246px;} div#sq12 {left: 370px;}
div#sq13, div#sq14,div#sq15, div#sq16
{ width: 60px; height:60px; background-color: yellow; border: 2px solid black; color: black;
top: 184px; position: absolute; z-index: 1;}
div#sq13 { left: 60px;} div#sq14 {left: 184px;} div#sq15 {left: 308px;} div#sq16 {left: 432px;}
div#sq17, div#sq18, div#sq19, div#sq20
{ width: 60px; height:60px; background-color: yellow; border: 2px solid black; color: black;
top: 246px; position: absolute; z-index: 1;}
div#sq17 { left: -2px;} div#sq18 {left: 122px;} div#sq19 {left: 246px;} div#sq20 {left: 370px;}
div#sq21, div#sq22,div#sq23, div#sq24
{ width: 60px; height:60px; background-color: yellow; border: 2px solid black; color: black;
top: 308px; position: absolute; z-index: 1;}
div#sq21 { left: 60px;} div#sq22 {left: 184px;} div#sq23 {left: 308px;} div#sq24 {left: 432px;}
div#sq25, div#sq26, div#sq27, div#sq28
{ width: 60px; height:60px; background-color: yellow; border: 2px solid black; color: black;
top: 370px; position: absolute; z-index: 1;}
div#sq25 { left: -2px;} div#sq26 {left: 122px;} div#sq27 {left: 246px;} div#sq28 {left: 370px;}
div#sq29, div#sq30, div#sq31, div#sq32
{ width: 60px; height:60px; background-color: yellow; border: 2px solid black; color: black;
top: 432px; position: absolute; z-index: 1;}
div#sq29 { left: 60px;} div#sq30 {left: 184px;} div#sq31 {left: 308px;} div#sq32 {left: 432px;}
div#d1, div#d2, div#d3, div#d4
{ width: 40px; height:40px; background-color: red; border: 2px solid black; color: black;
top: 8px; left: 8px; position: absolute; z-index: 2;}
div#d5
{ width: 40px; height:40px; background-color: blue; border: 2px solid black; color: black;
top: 8px; left: 8px; position: absolute; z-index: 2;}
</style>
<script type="text/javascript">
function allowDrop(ev) { ev.preventDefault(); }
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
function drop(ev) { var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault(); }
</script>
</head>

<body>

<div id="board">
<div id="sq1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="d1" draggable="true" ondragstart="drag(event)"></div></div>

<div id="sq2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="d2" draggable="true" ondragstart="drag(event)"></div></div>

<div id="sq3" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="d3" draggable="true" ondragstart="drag(event)"></div></div>

<div id="sq4" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="d4" draggable="true" ondragstart="drag(event)"></div></div>

<div id="sq5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq10" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq11" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq12" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq13" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq14" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq15" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq16" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq17" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq18" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq19" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq20" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq21" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq22" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq23" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq24" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq25" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq26" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq27" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq28" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="sq29" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="d5" draggable="true" ondragstart="drag(event)"></div></div>

<div id="sq30" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq31" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="sq32" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

</body></html>

If you copy this in Notepad and save it as html you will see that it allows each piece to be Dragged and Dropped (DND) onto any of the 32 playing squares.

The purpose of the game is for blue to get to the top of the board, moving first, then alternately with any red, one square per turn in any diagonal direction. Red tries to prevent this and moves similarly to blue except that only downward diagonal movement is allowed.

The game suffers from some points:
1) the moves need to be restricted as per the movement rules.
2) any piece should not be allowd to occupy any playing square already occupied
3) a counter is needed to regulate the alternate move sequence
4) it would be nice to randomize the initial position of blue at the start of the game

Any ideas on how to do this?