Estoy trabajando en un juego simple de ordenar números con Js
Usé display:flex para colocar todos los DIV internos dentro del contenedor DIV
Y quiero que cuando haga clic en un DIV específico, se mueva al espacio vacío SOLO cuando ese DIV y el espacio vacío sean visualmente vecinos
Quiero decir que comparten cualquier borde, ya sea arriba o abajo, a la izquierda o a la derecha.
como se muestra en esta imagen:
Imagen

En este caso (en la imagen de arriba) quiero que cuando alguien haga clic en el div número 6, se mueva hacia abajo al espacio vacío y deje el espacio vacío en su lugar original donde puedo mover más divs si son visualmente vecinos.
como esta imagen:
segunda imagen después de 1 movimiento
intento esto

 $('.tile').click(function (event) { $(this).animate({top:'100'}); });

Quiero obtener un código que pueda manejar todas las direcciones después de cada movimiento

¿Cómo puedo lograr esto con js o jquery?

mi codigo completo

 $(document).ready(function(){ $('.tile').click(function (event) { $(this).animate({top:'100'}); //var div = $(event.target).closest('.tile'); //div.next('.tile').after(div).animate({top:'100'}); }); });

 .flexDiv{ display:flex; flex-wrap: wrap; width:310px; border:1px solid black; } .tile{ position:relative; background:#08088A; text-align:center; width:29%; margin:1px; font-size:75px; font-weight:bold; color:#fff; padding:5px; } .white{ background:#fff; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="flexDiv"> <div class="tile">1</div> <div class="tile">2</div> <div class="tile">3</div> <div class="tile">4</div> <div class="tile">5</div> <div class="tile">6</div> <div class="tile">7</div> <div class="tile">8</div> </div>