<div class="container">
  <div class="solitaire" data-num='a1'>
    <div draggable="true" id="box" data-item='a1'></div>
  </div>
  <div class="solitaire" data-num='a2'></div>
  <div class="solitaire" data-num='a1'></div>
</div>
#box {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
}
[draggable="true"] {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.solitaire {
  height: 100px;
  width: 400px;
  border: 1px solid #000000;
}
.container {
  display: flex;
}

var box = document.querySelector('#box');
box.addEventListener('dragstart',dragStart);

var solitaire = document.querySelectorAll('.solitaire');
solitaire.forEach((item) => {
  item.addEventListener('drop',dropped);
  item.addEventListener('dragenter',cancelDefault);
  item.addEventListener('dragover',cancelDefault);
})

function cancelDefault (e) {
  e.preventDefault();
  e.stopPropagation();
  return false;
}

function dragStart (e) {
  e.dataTransfer.setData('text/plain', e.target.id);
}

function dropped (e) {
  cancelDefault(e);
  let id = e.dataTransfer.getData('text/plain');
    if( box.dataset.item === e.target.dataset.num) {
     e.target.appendChild(document.querySelector('#' + id))
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.