Есть 4 квадрата разного цвета и один серый квадрат, сделал так что бы квадраты можно было перетаскивать. При перетаскивание цветного квадрата в серый, цветной исчезает. Никак не могу понять, как покрасить серый квадрат в цвет перетаскиваемого квадрата. Как забрать стиль цветного квадрата и присвоить серому квадрату?
<style>
div[id$='Box']{
width: 100px;
height: 100px;
margin-bottom: 5em;
border: 2px solid black;
cursor: pointer;
}
#yellowBox{
background: yellow;
}
#greenBox{
background: green;
}
#blueBox{
background: blue;
}
#redBox{
background: red;
}
#gray{
width: 300px;
height: 300px;
background: gray;
margin: auto;
position: absolute;
left: 50%;
top: 200px;
}
</style>
</head>
<body>
<div id="gray"></div>
<div id="yellowBox"></div>
<div id="greenBox"></div>
<div id="blueBox"></div>
<div id="redBox"></div>
<script>
let boxs = document.querySelectorAll("div[id$='Box']");
for(box of boxs){
box.onmousedown = function(e){
console.log("click")
box = e.currentTarget;
box.style.position = "absolute";
box.style.zIndex = 1000;
function moveAt(event){
let x = event.clientX-50;
let y = event.clientY-50;
box.style.top = y+"px"
box.style.left = x+"px"
}
document.addEventListener('mousemove', moveAt);
document.onmouseup = function(){
document.removeEventListener('mousemove', moveAt);
let box_top = box.getBoundingClientRect().top;
let box_left = box.getBoundingClientRect().left;
let box_right = box.getBoundingClientRect().right
let box_bottom = box.getBoundingClientRect().bottom
let gray_top = gray.getBoundingClientRect().top;
let gray_left = gray.getBoundingClientRect().left;
let gray_right = gray.getBoundingClientRect().right;
let gray_bottom = gray.getBoundingClientRect().bottom;
if(box_left>gray_left && box_right < gray_right && box_top > gray_top && box_bottom < gray_bottom){
box.style.visibility = "hidden";
}
}
}
}
</script>
</body>
box.style.background = gray.style.background - не работает.
