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?