If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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.

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){

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.

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