Drag&drop chess
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.
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.
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++)
Change the piece order:
var imgOrder="rnbqkbnr".split(
And start with white square:
for(var r=1,i=0;i<cDiv.length;i++)
ASKER
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)?
How do i detect which picture was dropped on which square (anything better than coordinates)?
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
for the beginning here the chess board:
<html>
<head>
<title>Zvonko *</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("c
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":"li
}
for(var i=0;i<8;i++){
$("field_"+i).appendChild(
$("field_"+(8+i)).appendCh
$("field_"+(48+i)).appendC
$("field_"+(56+i)).appendC
}
}
function $(theId){
return document.getElementById(th
}
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><t
<td><div></div></td><td><d
<tr><td><div></div></td><t
<td><div></div></td><td><d
<tr><td><div></div></td><t
<td><div></div></td><td><d
<tr><td><div></div></td><t
<td><div></div></td><td><d
<tr><td><div></div></td><t
<td><div></div></td><td><d
<tr><td><div></div></td><t
<td><div></div></td><td><d
<tr><td><div></div></td><t
<td><div></div></td><td><d
<tr><td><div></div></td><t
<td><div></div></td><td><d
</table>
<center>
</form>
</body>
</html>