 drag and drop, drag and drop |
  |
| morpheus6177 |
 Aug 14 2012, 06:19 PM
Post
#1
|
|
Group: Members Posts: 1 Joined: 14-August 12 Member No.: 17,609  |
Hi, I’m working on a web page which displays the game of chess. I’ve managed to make the board, also put the pieces where there supposed to be, but I’ve been having a hard time making the chess pieces move from one place to another. I need some advice if there any tags or functions etc…. that I can use so I can drag my pieces and put them in an empty spot. And also allow me to put a piece on another piece then the piece disappears leaving the other piece.
THE CODE SO FAR: <html> <head> <title>Chess Board using PHP</title> <style type="text/css"> td { height:75px; width:75px; } table { border: 4px solid black; border-collapse:collapse; } h2 { font-family:Arial; font-size:25px; color:royalblue; font-weight: bold; text-align: center; } </style> <script> function dragIt(target, e) { e.dataTransfer.setData('SpanImg', target.id); } function dropIt(target, e) { var id = e.dataTransfer.getData('SpanImg'); target.appendChild(document.getElementById(id)); e.preventDefault(); } function trashIt(target, e) { var id = e.dataTransfer.getData('SpanImg'); removeElement(id); e.preventDefault(); } function removeElement(id) { var d_node = document.getElementById(id); d_node.parentNode.removeChild(d_node); } </script> </head> <body style="background-color: red;"> <h2>Chess Game</h2> <!--A chessboard is the type of checkerboard used in the board game chess, and consists of 64 squares (eight rows and eight columns) arranged in two alternating colors black and white--> <?php echo "<table border=\"1\" align=\"center\">"; //During 1 iteration 2 top rows are created. //For loop will iterate 4 times creating 8 rows. $board = array( array('♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'), array('♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'), array(' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '), array(' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '), array(' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '), array(' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '), array('♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'), array('♜', '♞', '♝', '♚', '♛', '♝', '♞', '♜')); for($i=4;$i>=1;$i--) { echo "<tr align=\"center\">"; //For loop creates 1st row starting from black for($j=0;$j<8;$j++) { if(($j%2)==0) { $color = "blue"; } else { $color = "white"; } switch ($i) { case 4: $s=0; break; case 3: $s=2; break; case 2: $s=4; break; case 1: $s=6; break; } $henry = $board[$s][$j]; echo <<<_END <html> <head> <script> </script> <body> <td bgcolor ="$color" id="holder" ondrop="dropIt(this, event)" ondragenter="return false" ondragover="return false"> <font size=26> <span draggable="true" id="lt" ondragstart="dragIt(this, event)">$henry</span></td> </body> </html> _END; }//for loop ends echo "</tr>"; //Second Row starting with white echo "<tr align=\"center\">"; $s+= 1; //For loop creates 2nd row starting from white for($j=7;$j>=0;$j--) { if(($j%2)==0) { $color = "blue"; } else { $color = "white"; } switch ($i) { case 4: $s=1; break; case 3: $s=3; break; case 2: $s=5; break; case 1: $s=7; break; } $charles = $board[$s][7-$j]; echo <<<_END <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <td bgcolor ="$color" id="hat" ondrop="dropIt(this, event)" ondragenter="return false" ondragover="return false"> <font size=26> <span draggable="true" id="lp" ondragstart="dragIt(this, event)">$charles</span></td> </body> </html> _END; }//for loop ends echo "</tr>"; }//outer for ends. echo "</table>"; ?> </body> </html> |
  |
 
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 26th May 2013 - 12:18 AM |
Invision Power Board
© 2013 IPS, Inc.
Licensed to: HTMLHelp.com, LLC