@MrTomMus

Как покрасить квадрат?

Есть 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 - не работает.
  • Вопрос задан
  • 99 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽