Edit in JSFiddle

$(document).ready(function(){
	console.log('Inicio JQuery');
	
//Manipulacion Titulo
	document.title = "Grilla";

//Celdas
	var cantidadCeldas = 4;	

//Definición del lado (todo el documento)
	var d; var contenedor = $(document);
	if( contenedor.width() > contenedor.height()) { d = contenedor.height(); } else { d = contenedor.width(); } d*=0.9;
	//console.log(d);

//BORDE	
	$('<div id="grilla-borde"></div>').appendTo('body'); 
	$('#grilla-borde').css('width', d + 'px'); $('#grilla-borde').css('height', d + 'px');

//INTERIOR
	$('<div id="grilla-interna"></div>').appendTo('#grilla-borde');
	$('#grilla-interna').css('width', 90 + '%'); $('#grilla-interna').css('height', 90 + '%');
	$('#grilla-interna').css('margin', 5 + '%');

//ABAJO 
$('<div id="info" style="text-align:center; font-size:3em;"></div>').appendTo('body');

//FILAS
	var altoFilas = 0.9*100/cantidadCeldas;
	var marginTopFilas = 0.1*100/(cantidadCeldas - 1);
	var anchoFilas = 100/1;
	
	for( var i = 0 ; i < cantidadCeldas ; i++) 
		{ $('<div class="filas ' + 'fila_' + (i+1) + '"></div>').appendTo('#grilla-interna'); }

	$('.filas').each( function() {
		$(this).css('width', anchoFilas + '%');	$(this).css('height', altoFilas + '%');
		if( ! $(this).is(':first-child') ) { $(this).css('margin-top', marginTopFilas + '%'); }
	});

//CELDAS
	var altoCeldas = 100/1;
	var anchoCeldas = 0.9*100/cantidadCeldas;
	var leftCeldas = 0.1*100/(cantidadCeldas - 1);
	
	for( var i = 0 ; i < cantidadCeldas ; i++) 
		for( var j = 1 ; j <= cantidadCeldas ; j++) 
		{ $('<div class="celdas ' + 'columna_' + (i+1) + ' "></div>').appendTo('#grilla-interna .filas:nth-child(' + j + ')'); }
	
	$('.celdas').each( function() {
		$(this).css('width', anchoCeldas + '%'); $(this).css('height', altoCeldas + '%');
		if( ! $(this).is(':first-child') ) { $(this).css('margin-left', leftCeldas + '%'); }
	});
	

//LLENAR
	for( var i = 1 ; i <= cantidadCeldas ; i++) {
		for( var j = 1 ; j <= cantidadCeldas ; j++) {
			//$('<div class="ficha"></div>').appendTo('.filas:nth-child(' + i + ') .celdas:nth-child(' + j + ')');
			spawnFicha(i,j);
		}
	}


//EL LUGAR LIBRE
$('#grilla-interna').children(':last-child').children(':last-child').children('.ficha').attr('id','vacio');
$('#vacio').removeClass('ficha');
$('#vacio').css('background-color', $('#vacio').parent().css('background-color') );


//AL HACER CLICK EN UNA FICHA
	$('body').on('click', '.ficha', function() {
	
	if( $('#vacio').attr('class') === '' ) {
		
	//FILA Y COLUMNA
		var filaClick = getFila( $(this) );
		var columnaClick = getColumna( $(this) );
		
	//FILLA Y COLUMNA DEL VACIO
		
		var filaVacio = getFila( $('#vacio') );
		var columnaVacio = getColumna( $('#vacio') );
		
	//MOVIMIENTO LATERAL
		if(filaClick === filaVacio) {
		
		//DE IZQUIERDA A DERECHA
			if( columnaClick < columnaVacio ) {
				for(i=columnaClick; i < columnaVacio; i++) {
					moverFicha(filaClick,i,'moverDerecha');
				}
			}
		
		//DE DERECHA A IZQUIERDA
			if( columnaClick > columnaVacio ) {
				for(i=columnaClick; i > columnaVacio; i--) {
					moverFicha(filaClick,i,'moverIzquierda');
				}
			}
		
			$('#vacio').addClass(filaClick + '-' + columnaClick);
		}//LATERAL
	
	//MOVIMIENTO HORIZONTAL
		if(columnaClick === columnaVacio) {
		
		//DE ABAJO A ARRIBA
			if( filaClick > filaVacio ) {
				for(i=filaClick; i > filaVacio; i--) {
					moverFicha(i, columnaClick, 'moverArriba');
				}
			}
			
		//DE ARRIBA A ABAJO
			if( filaClick < filaVacio ) {
				for(i=filaClick; i < filaVacio; i++) {
					moverFicha(i, columnaClick, 'moverAbajo');
				}
			}
		
			$('#vacio').addClass(filaClick + '-' + columnaClick);
		}//HORIZONTAL
		
		
	//INFO
		console.log('Vacio fila ' + filaVacio + ' - Columna ' + columnaVacio);
		console.log('Click Fila ' + filaClick + ' - Columna ' + columnaClick);
		//$('#info').text('Fila ' + filaClick + ' - Columna ' + columnaClick);
	}
	
	});
	
//AL POSARSE SOBRE
	$('body').on('mouseover', '.ficha', function() { $(this).css('background-color','#B71234'); });
	$('body').on('mouseout', '.ficha', function() {	$(this).css('background-color','#009900'); });

	
//GETTERS
	function getFila(elemento) { return elemento.parent().parent().attr('class').split('_')[1];	}
	function getColumna(elemento) {	return elemento.parent().attr('class').split('_')[1]; }
	

	function moverFicha(fila,columna,sentido) {
		var ficha = $('.fila_'+fila).children('.columna_'+columna).children('.ficha');
		ficha.addClass(sentido); //DERECHA, IZQUIERDA
	}
		

//SPAWN
	function spawnFicha(fila,columna) { $('.fila_'+fila).children('.columna_'+columna).append('<div class="ficha"></div>'); }

//Al FINALIZAR	
	function listener() {
		console.log('listener');
		
	//PUEDE PASAR A VARIABLE GLOBAL
		var nuevaFilaVacia = $('#vacio').attr('class').split('-')[0];
		var nuevaColumnaVacia = $('#vacio').attr('class').split('-')[1];	
		$('#vacio').remove();
	
	
	//NUEVO VACIO	
		$('.fila_'+nuevaFilaVacia).children('.columna_'+nuevaColumnaVacia).append('<div class=""></div>');
		$('.fila_'+nuevaFilaVacia).children('.columna_'+nuevaColumnaVacia).children().attr('id','vacio');
		$('#vacio').css('background-color', $('#vacio').parent().css('background-color') );

		
		$('.moverDerecha').each(function(){
			
			var f = getFila( $(this) );
			var c = getColumna( $(this) ) ; c++;
			spawnFicha( f , c  );
			
		});
		
		$('.moverIzquierda').each(function(){
			
			var f = getFila( $(this) );
			var c = getColumna( $(this) ) ; c--;
			spawnFicha( f , c  );
			
		});
		
		$('.moverArriba').each(function(){
			
			var f = getFila( $(this) ); f--;
			var c = getColumna( $(this) ) ; 
			spawnFicha( f , c  );
			
		});
		
		$('.moverAbajo').each(function(){
			
			var f = getFila( $(this) ); f++;
			var c = getColumna( $(this) ) ; 
			spawnFicha( f , c  );
			
		});

	
		
	
		$('.moverDerecha').remove();
		$('.moverIzquierda').remove();
		$('.moverArriba').remove();
		$('.moverAbajo').remove();
		
	}
	

	$('body').on('webkitAnimationEnd animationend', '.ficha', listener);
	
	
	
}); //ready jquery

#grilla-borde {
	//background-color: #CCBBBB;
	background-color: #BBADA0;
	display: block; 
	margin: 0 auto; 
	text-align:center;
	position: relative;
	border-radius: 5%;
	z-index: 1;
	
	
}

#grilla-interna {
	//background-color: #009900;
	background-color: #BBADA0;
	position: absolute;
	z-index: 2;
}

.filas {
	//background-color: #00AA00;
	background-color: #BBADA0;
	z-index: 3;
} 

.celdas {
	//background-color: #00EE00;
	//background-color: #CDC1B4;
	border-radius: 5%;
	float: left;
	z-index: 4;
}

.ficha {
	background-color: #009900;
	border-radius: 5%;
	z-index: 5;
	height: 100%;
	width: 100%;
}

.moverDerecha {
	-webkit-animation-name: moverDerecha;
	-webkit-animation-duration: 0.1s;
	
	animation-name: moverDerecha;
	animation-duration: 0.1s;
}

@-webkit-keyframes moverDerecha {
    0%   {}
	100% {margin-left: 114%;}
}

@keyframes moverDerecha {
    0%   {}
	100% {margin-left: 114%;}
}

.moverIzquierda {
	-webkit-animation-name: moverIzquierda ;
	-webkit-animation-duration: 0.1s;
	
	animation-name: moverIzquierda ;
	animation-duration: 0.1s;
}

@-webkit-keyframes moverIzquierda {
    0%   {}
	100% {margin-left: -114%;}
}

@keyframes moverIzquierda {
    0%   {}
	100% {margin-left: -114%;}
}

.moverArriba {
	-webkit-animation-name: moverArriba ;
	-webkit-animation-duration: 0.1s;
	
	animation-name: moverArriba ;
	animation-duration: 0.1s;
}

@-webkit-keyframes moverArriba {
    0%   {}
	100% {margin-top: -114%;}
}

@keyframes moverArriba {
    0%   {}
	100% {margin-top: -114%;}
}

.moverAbajo {
	-webkit-animation-name: moverAbajo ;
	-webkit-animation-duration: 0.1s;
	
	animation-name: moverAbajo ;
	animation-duration: 0.1s;
}

@-webkit-keyframes moverAbajo {
    0%   {}
	100% {margin-top: 114%;}
}

@keyframes moverAbajo {
    0%   {}
	100% {margin-top: 114%;}
}