Ideas para mapa (trabajando con ajax)

[Tecna]

Buenas,

lo que quieres hacer es bastante complejo y laborioso, se puede hacer de varias formas, una podría ser arrastando y soltando la ficha con los eventos del raton onmouseup, onmousemove y onmousedown y necesitarías conocer al menos las coordenadas del ratón y de la ficha o la casilla con propiedades como offsetTop y clientX.

También podrías hacer una animación y controlarlo con el evento onclick en la casilla destino después de haber seleccionado la ficha que quieres mover, para esto tendrías que jugar con la posición inicial y final de la ficha y en función de cual sea mayor sumar o restar un pixel a las propiedades top y left, teniendo en cuenta todos los posibles movimientos y repetirlo hasta que ambas posiciones sean iguales. También es muy conveniente poner una pausa entre cada movimiento con setTimeout para que el movimiento sea mas natural y creible para el ojo. Lo más sencillo sería posicionar las fichas de forma absoluta respecto al tablero y guardar sus valores en un array, así puedes facilmente hacer los cálculos de los nuevos valores y tienes un punto de referencia fijo, el tablero, y lo aislas de posibles problemas que pudieran surgir si calculas las posiciones respecto a la ventana del navegador. Si entra en juego z-index la cosa se complica.