mover elemento

Olá pessoal . quero muito fazer o seguinte: Clicar no elemento e com a seta mover o elemento pra cima ou pra baixo

<style>
 *{ margin: 0; padding: 0;}

.divPrincipal{ width: 200px; display: flex; flex-wrap: wrap; align-items: center; border: 2px solid blue;}

.divPaiCor{ flex:1; margin-right: 10px; }
.h1_1{ padding: 4px 4px; margin-bottom: 2px; background-color:#c1c1c1; cursor: default; }

.divPaiSeta{ flex:0.5; font-size: 30px; text-align: center;}
.b_1{ padding: 0px 4px; margin: 8px 10px; background-color:#cfcfcf; display: block; border: 1px solid green; cursor: default; }

</style>

<div class="divPrincipal">

<div class="divPaiCor">
<h1 class="h1_1">green </h1>
<h1 class="h1_1">yellow </h1>
<h1 class="h1_1">blue </h1>
<h1 class="h1_1">orange </h1>
</div>

<div class="divPaiSeta">
<b id="id1" class="b_1">⇧ </b>
<b id="id2" class="b_1">⇩ </b>
</div>

</div>

<script>
 function setaPraCima(){
 let x = document.querySelectorAll(".h1_1");

 for(var i=0; i<x.length; i++){

 }
 }

 function setaPraBaixo(){
 let y = document.querySelectorAll(".h1_1");
 for(var i=0; i<y.length; i++){

}
}
</script>