Buenas,
como ya te dije lo mas sencillo sería hacer un array con las casillas. Suponiendo que tuvieras un tablero de 3 x 3 casillas, el array tendría 9 elementos (del 0 al 8), así podrías trabajar con ellos o también con un array de dos dimensiones donde la casilla[4] por ejemplo estaría en la en la posición [1,1]. En el css habría que posicionar las casillas y el tablero de forma absoluta pero si lo tienes en hojas de estilo externas además tendrás que redefinir los estilos en el javascript para poder acceder a ellos desde la propiedad style. También podrías calcular los valores en función de la posición que ocupe sabiendo el lado de la casilla, por ejemplo si cada casilla mide 50px de lado y la casilla[4] y hemos dicho que está en la fila 1 columna 1, el top seria 1*50 y el left 1*50.
Otra cosa muy a tener en cuenta es que debes guardar el valor devuelto por cada función que se ejecute con el evento onclick al pulsar en una casilla para poder compararlo con la siguiente y saber cuanto se tiene que mover la primera. Para ello mejor que variables globales es usar cierres.
Y luego ya sería el tema del movimiento, controlando las pausas entre movimientos y la propagación de eventos por ejemplo cuando se pulse de nuevo una primera casilla sin que haya terminado de moverse la anterior.
Te he hecho un pequeño ejemplo que funciona de como podrías empezar con un tablero de 3x3 y 50px de lado cada casilla.
Código HTML:
Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="script/fichero.js"></script> <link rel="stylesheet" href="css/fichero.css" type="text/css">
<div id="casilla-1" class="c2"></div> <div id="casilla-3"class="c2"></div> <div id="casilla-5"class="c2"></div> <div id="casilla-7"class="c2"></div> <p>pulsa en una casilla
</p>
Código CSS:
Ver originaldiv {
width: 50px;
height: 50px;
background: #ff0;
position: absolute;
top: 0;
left: 0;
}
#tablero {
width: 150px;
height: 150px;
top: 50px;
left: 50px;
border: 1px solid #00f;
}
.c2 { background: #00f; }
Código Javascript
:
Ver original// ejemplo de persistencia de valores sin usar variables globales
// asociando los eventos por parejas
// bY Tecna
// dado un tablero de nxn casillas seleccionamos dos haciendo click
// y guardamos sus posiciones para poder comparar
var la = 50; // pixeles del lado de la casilla
var n = 3; // numero de casillas en cada lado del tablero
function init()
{
var tablero = document.getElementById('tablero');
var casillas = tablero.getElementsByTagName('div');
for (var i=0; i<n; ++i)
{
for (var j=0; j<n; ++j)
{
// asignamos los valores de las propiedades top y left
// para que esten disponibles con la propiedad style
var num = i*n + j;
var top = i*la + 'px';
var left = j*la + 'px';
casillas[num].style.top = top;
casillas[num].style.left = left;
// asignamos el evento inicial a cada casilla
asignaInit(casillas, casillas[num]);
}
}
}
window.onload = init;
function asignaInit(casillas, casilla)
{
casilla.onclick = function (e) {pulsarIni(casillas, casilla);};
}
function pulsarIni(casillas, casillaIni)
{
// funcion que recoge los valores de la primera casilla y
// llama a la función genérica de asignar eventos
alert('Casilla Inicial: ' + casillaIni.id + '\npulse en otra casilla');
var pulsarF = function (e) { pulsarFin(e, casillas, this, casillaIni); };
asignar(pulsarF, casillas);
}
function asignar(cual, casillas)
{
// función genérica para asignar eventos
for (var i=0; i<n; ++i)
{
for (var j=0; j<n; ++j)
{
var num = i*n + j;
casillas[num].onclick = cual;
}
}
}
function pulsarFin(e, casillas, casillaFin, casillaIni)
{
// función que recibe los valores de la primera casilla y obtiene
// los de la segunda, además reasigna los eventos para la primera casilla
var topI = casillaIni.style.top;
var leftI = casillaIni.style.left;
var topF = casillaFin.style.top;
var leftF = casillaFin.style.left;
var ini = 'Casilla Inicial: ' + casillaIni.id + ' | top: ' + topI + ', left: ' + leftI;
var fin = 'Casilla Final: ' + casillaFin.id + ' | top: ' + topF + ', left: ' + leftF;
alert(ini + '\n' + fin);
var pulsarI = function (e) { pulsarIni(casillas, this); };
asignar(pulsarI, casillas);
// con los datos obtenidos de ambas casillas comparariamos las posiciones
//y llamariamos a la función encargada de mover la ficha de la
//casilla primera a la segunda.
}