mover elemento

[Biel. 9]

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>

 

[wanderval 19]

CSS

*{ 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;  }

.divPaiSeta b:hover {
  background: #000;
  color: #fff;
  cursor: pointer;
}

.divPaiSeta b:active {
  background: gray;
  color: #000;
  user-select: none;
}

.divPaiCor h1:hover{
  background: #000;
  color: #fff;
  cursor: pointer;
}

.selectedItem {
  background: #000;
  color: #fff;
}

JS

let indexSelected;
let elementSelected;
let divPaiCor = document.querySelector(".divPaiCor");
let arrowUp = document.querySelector("#id1");
let arrowDown = document.querySelector("#id2");

function setaPraCima(){
  let x = document.querySelectorAll(".h1_1");
  indexSelected = returnPositionIndex(indexSelected - 1);
  divPaiCor.insertBefore(elementSelected, x[indexSelected]);
}

function setaPraBaixo(){
  let y = document.querySelectorAll(".h1_1");
  indexSelected = returnPositionIndex(indexSelected + 1);
  divPaiCor.insertBefore(elementSelected, y[indexSelected].nextSibling);
}

function returnPositionIndex(index) {
  let min = 0, max = 3;
  
  if(index <= min){ return min; }
  if(index >= max){ return max; }
  if(index > min || index < max){ return index; }
}

function selectItem(refItem) {
  let allElements = [...refItem.target.parentNode.children];
  let index = allElements.indexOf(refItem.target);
  
  allElements.map(item => item.classList.remove("selectedItem"));
  refItem.target.classList.add("selectedItem");
  
  indexSelected = index;
  elementSelected = refItem.target;
}

divPaiCor.addEventListener("click", selectItem);
arrowUp.addEventListener("click", setaPraCima);
arrowDown.addEventListener("click", setaPraBaixo);

 

Jsbin: https://jsbin.com/wuwusinoro/edit?html,css,js,output

[Biel. 9]

14 horas atrás, wanderval disse:

CSS

*{ 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;  }

.divPaiSeta b:hover {
  background: #000;
  color: #fff;
  cursor: pointer;
}

.divPaiSeta b:active {
  background: gray;
  color: #000;
  user-select: none;
}

.divPaiCor h1:hover{
  background: #000;
  color: #fff;
  cursor: pointer;
}

.selectedItem {
  background: #000;
  color: #fff;
}

JS

let indexSelected;
let elementSelected;
let divPaiCor = document.querySelector(".divPaiCor");
let arrowUp = document.querySelector("#id1");
let arrowDown = document.querySelector("#id2");

function setaPraCima(){
  let x = document.querySelectorAll(".h1_1");
  indexSelected = returnPositionIndex(indexSelected - 1);
  divPaiCor.insertBefore(elementSelected, x[indexSelected]);
}

function setaPraBaixo(){
  let y = document.querySelectorAll(".h1_1");
  indexSelected = returnPositionIndex(indexSelected + 1);
  divPaiCor.insertBefore(elementSelected, y[indexSelected].nextSibling);
}

function returnPositionIndex(index) {
  let min = 0, max = 3;
  
  if(index <= min){ return min; }
  if(index >= max){ return max; }
  if(index > min || index < max){ return index; }
}

function selectItem(refItem) {
  let allElements = [...refItem.target.parentNode.children];
  let index = allElements.indexOf(refItem.target);
  
  allElements.map(item => item.classList.remove("selectedItem"));
  refItem.target.classList.add("selectedItem");
  
  indexSelected = index;
  elementSelected = refItem.target;
}

divPaiCor.addEventListener("click", selectItem);
arrowUp.addEventListener("click", setaPraCima);
arrowDown.addEventListener("click", setaPraBaixo);

 

Jsbin: https://jsbin.com/wuwusinoro/edit?html,css,js,output

Um espetáculo Wanderval, sem palavras. Obrigado !