?
Solved

Drag&drop chess

Posted on 2007-09-30
5
Medium Priority
?
319 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.
0
Comment
Question by:Rok-Kralj
  • 4
5 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 19986923
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>


0
 
LVL 63

Expert Comment

by:Zvonko
ID: 19986932
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++){

0
 
LVL 12

Author Comment

by:Rok-Kralj
ID: 19986958
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)?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 19987963
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


0
 
LVL 63

Accepted Solution

by:
Zvonko earned 1500 total points
ID: 19988025
If you decide to take the drag&drop scripts from http://wiki.script.aculo.us/scriptaculous/show/Draggable then here an example:

<html>
<head>
<title>Zvonko &#42;</title>
<style>
#chess div {
  padding: 4px;
  vertical-align: middle;
  position: relative;
  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="rnbqkbnr".split("");
var cCol = "abcdefgh".split("");
window.onload = function(){
  var cDiv = document.getElementById("chess").getElementsByTagName("div");
  for(var r=1,i=0;i<cDiv.length;i++){
    var r= 8-parseInt(i/8);
    var c=cCol[i%8];
    cDiv[i].id = "field_"+c+r;
    if(i%8==0) r++;
    cDiv[i].className = ((r+i)%2)?"darkSquare":"lightSquare";
  }
  for(var i=0;i<8;i++){
    var c=cCol[i];
    var f=imgOrder[i];
    $("field_"+c+"8").appendChild(chessPiece("b"+f,"b"+f+c));    
    $("field_"+c+"7").appendChild(chessPiece("bp","bp"+c));    
    $("field_"+c+"2").appendChild(chessPiece("wp","wp"+c));    
    $("field_"+c+"1").appendChild(chessPiece("w"+f,"w"+f+c));
    new Draggable("b"+f+c,{snap:[40,40],revert:true});  
    new Draggable("W"+f+c,{snap:[40,40],revert:true});  
    new Draggable("bP"+c,{snap:[40,40],revert:true});  
    new Draggable("WP"+c,{snap:[40,40],revert:true});  
  }
}

function chessPiece(imgSrc, imgId){
  var imgPiece = new Image();
  imgPiece.id = imgId;
  imgPiece.title = imgId;
  imgPiece.className = "piece";
  imgPiece.src = imgBase+imgSrc+".gif";
  return imgPiece;
}
</script>
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="dragdrop.js"></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>



0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Measuring Server's processing rate with a simple powershell command. The differences in processing rate also was recorded in different use-cases, when a server in free and busy states.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month15 days, 5 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question