Нужна помощь со сменой цвета кубика

Question

Опишу что мне нужно, и хотел бы узнать, в какую сторону двигаться и где искать. У меня есть 4 кубика. Три из них разного цвета. когда ты переносишь кубик к 4, он нейтрального цвета, то после того как навел и отпустил красный кубик пропадает и меняет цвет серого кубика, на красный. Момент со скрытием и перемещением сделал, но сколько не искал, не могу правильно сформулировать. Куда двигаться просто.

Answer 1

const cubes = document.querySelectorAll(".box");
const rubik = document.querySelector(".grey");
let cube;

cubes.forEach((cube) => {
  cube.style.setProperty('--x', `${Math.random() * (window.innerWidth - 100)}px`);
  cube.style.setProperty('--y', `${Math.random() * (window.innerHeight - 100)}px`);
});

document.addEventListener('mousedown', (event) => cube = event.target.classList.contains('box') ? event.target : undefined);

document.addEventListener('mousemove', (event) => {
  if (cube) {
    cube.style.setProperty('--x', `${event.clientX - 50}px`);
    cube.style.setProperty('--y', `${event.clientY - 50}px`);
  }
});

document.addEventListener('mouseup', (event) => {
  const rect = cube.getBoundingClientRect();
  const rubikRect = rubik.getBoundingClientRect();

  if (rect.top > rubikRect.top && rect.bottom < rubikRect.bottom && rect.left > rubikRect.left &&
    rect.left + rect.width < rubikRect.left + rubikRect.width) {
    cube.hidden = true;
    rubik.style.backgroundColor = getComputedStyle(cube).backgroundColor;
  }

  cube = undefined;

});

html,
body {
  height: 100%;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 10;
  transform: translate(var(--x, 0), var(--y, 0));
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

#blue {
  background-color: blue;
}

.grey {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgb(173, 173, 173);
}

<div id="red" class="box"></div>
<div id="green" class="box"></div>
<div id="blue" class="box"></div>
<div id="grey" class="grey"></div>

БЛОГ НА HUSL

Нужна помощь со сменой цвета кубика

Ответы (1 шт):