We help IT Professionals succeed at work.

Drag&drop chess

338 Views
Last Modified: 2012-08-14
I'm working on javascript chess simulator.

Easily said, I have 81 divs with IDs from field_1 to filed_81.

Then I have 32 images with IDs from piece_1 to piece_31.


What must I do that when drop is finnished it allerts piece ID and target fields ID?

Thanks for your time.
Comment
Watch Question

ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
Halo Care :-)

for the beginning here the chess board:
<html>
<head>
<title>Zvonko &#42;</title>
<style>
#chess div {
  padding: 4px;
  vertical-align: middle;
  width: 40px;
  height: 40px;
}

#chess div.darkSquare {
  background-color: silver;
}

#chess div.lightSquare {
  background-color: white;
}
img.piece {
  width: 30px;
  height: 30px;
}
</style>
<script>
var imgBase="http://static.chess.com/js/chess/images/chess/pieces/modern2/";
var imgOrder="rnbkqbnr".split("");
window.onload = function(){
  var cDiv = document.getElementById("chess").getElementsByTagName("div");
  for(var r=i=0;i<cDiv.length;i++){
    cDiv[i].id = "field_" + i;
    if(i%8==0) r++;
    cDiv[i].className = ((r+i)%2)?"darkSquare":"lightSquare";
  }
  for(var i=0;i<8;i++){
    $("field_"+i).appendChild(chessPiece("b"+imgOrder[i],i));    
    $("field_"+(8+i)).appendChild(chessPiece("bp",i));    
    $("field_"+(48+i)).appendChild(chessPiece("wp",i));    
    $("field_"+(56+i)).appendChild(chessPiece("w"+imgOrder[i],i));    
  }
}
function $(theId){
  return document.getElementById(theId);
}
function chessPiece(imgSrc, imgId){
  var imgPiece = new Image();
  imgPiece.id = imgSrc+imgId;
  imgPiece.className = "piece";
  imgPiece.src = imgBase+imgSrc+".gif";
  return imgPiece;
}
</script>
</head>
<body>
<form>
<center>
<table id="chess" border="1" >
<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td>
<td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td>
<td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td>
<td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td>
<td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td>
<td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td>
<td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td>
<td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td>
<td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
</table>
<center>
</form>
</body>
</html>


ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
Sorry, my borad was inverted.
Change the piece order:
var imgOrder="rnbqkbnr".split("");

And start with white square:
  for(var r=1,i=0;i<cDiv.length;i++){

Author

Commented:
What javascript function i have to prepend to images to make them dragable?

How do i detect which picture was dropped on which square (anything better than coordinates)?
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
There is NO javascript function that you can prepend to an images to make them dragable.  
To understand what happens when you click on an image and move the mouse and the image follows your mouse and stop moving when you release the mouse button, to understand that all scripts behind the scene you can simply look at Google and find a toolbox that feets best to you. But for sure it is not one script line or two. There ora hundred lines for simple dragging and several thousand lines for compfortable draging.
http:Q_21131085.html
http://www.google.com/search?q=javascript+drag+drop


Systems architect
CERTIFIED EXPERT
Top Expert 2006
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.