<div class="container">
  <div class="drop_area area_1">
    <div class="div_WI" draggable="true" id="item">
    </div>
  </div>
  <div>
    <- drag and drop -> 
  </div>
  <div class="drop_area area_2">
     
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');

*{
  box-sizing : border-box;
  background-repeat: no-repeat;
  font-family: 'Fira Code', monospace;
}
.container{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height : 100vh;
  width : 100vw;
  flex-flow : row wrap;
  .div_WI{
    min-width : 200px;
    width : 200px;
    min-height: 200px;
    border: 1px solid red;
     background-image: url(https://images.dog.ceo/breeds/collie-border/n02106166_6833.jpg), url(https://images.dog.ceo/breeds/terrier-westhighland/n02098286_4575.jpg);
  background-position: 50% top, center;
  background-size: 100px 80px, contain;
  background-color: lightgray;
  border-radius: 15px;
    
  }
  .dog1{
    display: none;
  }
  .drop_area{
    min-width: 300px;
    min-height: 300px;
    paddin: 1rem;
    border: 1px solid red;
    // background-image : url();
    background-size: contain;
    background-position: center;
    display : flex;
    justify-content: center;
    align-items: center; 
  }
}

const draggable = document.querySelector('.div_WI');
const dropAreaOne = document.querySelector('.area_2');
const dropAreaTwo = document.querySelector('.area_1');


function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
 let element = document.getElementById(data);
  if(element !== ev.target){
  ev.target.appendChild(element);
  }
}

draggable.addEventListener('dragstart', drag);
dropAreaOne.addEventListener('drop', drop);
dropAreaOne.addEventListener('dragover', allowDrop);
dropAreaTwo.addEventListener('drop', drop);
dropAreaTwo.addEventListener('dragover', allowDrop);