Как менять позиции html блоков c помощью js?

178

29 июля 2018, 17:00

Есть такая задача: Имеется пять html блоков, 4 по углам и один в центре, при нажатии на любой из угловых блоков центральный должен занимать позицию нажатого блока а нажатый в свою очередь перемещаться на место центрального.

Не совсем понимаю как реализовать это на javascript'e.

Answer 1

Просто меняйте позиции элементов между собой

let divs = document.getElementsByTagName("div"); 
for(var i = 0; i<divs.length; i++) { 
    divs[i].onclick = function() { 
    if (this.id == 'center') return; 
    let center = document.getElementById('center'); 
    let cLeft = center.style.left; 
    let cTop = center.style.top; 
    center.style.left = this.style.left; 
    center.style.top = this.style.top; 
    this.style.left = cLeft; 
    this.style.top = cTop; 
    center.removeAttribute('id'); 
    this.setAttribute('id','center'); 
  }; 
}

div { 
  position: fixed; 
  width: 50px; 
  height: 50px; 
}

<div style="top:0px;left:0px; background-color: red;"></div> 
<div style="top:0px;left:100px; background-color: green;"></div> 
<div style="top:50px;left:50px; background-color: blue;" id="center"></div> 
<div style="top:100px;left:0px; background-color: yellow;"></div> 
<div style="top:100px;left:100px; background-color: maroon;"></div>