<div class="container">
  <div class="draggable one" draggable="true">
    drag me
  </div>
  <div class="draggable two" draggable="true">
    drag me
  </div>
  <div class="draggable three" draggable="true">
    drag me
  </div>
  <div class="droptarget">drop here</div>
  <div class="droptarget">drop here</div>
  <div class="droptarget">drop here</div>
</div>
body {
  background-color: #F1C40F;
  font-family: "Courier New";
}

.container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}

.draggable, .droptarget {
  border: 20px solid white;
  margin: 30px;
  padding: 30px;
  text-align: center;
  color: white;
  font-size: 2rem;
}

.one {
  background-color: #f15e0f;
}
.two {
  background-color: #a532f1;
}
.three {
  background-color: #2274a5;
}

.droptarget {
  border: 10px dashed white;
  transition: border-width 0.5s linear;
}

.hover {
  border-width: 20px;
}
document.querySelectorAll('.draggable').forEach(item => {
  item.addEventListener('dragstart', event => {
    event.dataTransfer.setData('text/plain', getComputedStyle(item).backgroundColor)
  })
})

document.querySelectorAll('.droptarget').forEach(item => {
  item.addEventListener('dragover', event => {
    event.preventDefault()
  })
  item.addEventListener('dragleave', event => {
    item.classList.remove('hover')
  })
  item.addEventListener('dragenter', event => {
    item.classList.add('hover')
  })
  
  item.addEventListener('drop', event => {
    item.style.backgroundColor = event.dataTransfer.getData('text/plain')
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.