I`m working on a simple number ordering game with Js
I used display:flex to place all inner DIVs inside the container DIV
And I want when I click on specific DIV it moves to the empty space ONLY when that DIV and the empty space are visually neighbors
I mean they share any border either above or beneath or left or right
as shown in this Image:
Image

In this case (in the image above) I want when someone click the div number 6 it moves down to the empty space and left empty space in its original place where I can move further divs if they are visually neighbors
as this image :
second image after 1 move
I try this

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

I want to get some code that I can handle all directions after each move

How can I achieve this with js or jquery?

my full code

$(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>