Prevent drop event when it's already have child element ? Drag and Drop

https://stackoverflow.com/questions/50660597/prevent-drop-event-when-its-already-have-child-element-drag-and-drop

HTML

<div class="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="element" id="drag1" style="background: blue;" draggable="true" ondragstart="drag(event)"></div>
<div class="element" id="drag2" style="background: red;" draggable="true" ondragstart="drag(event)"></div>
     
<script>
let offset = [0, 0]

function allowDrop(ev) {
  var t = ev.target;
  while (t !== null && !t.classList.contains("target")) {
    t = t.parentNode;
  }
  if (t && t.childNodes.length > 0) {
    return false;
  }
  ev.preventDefault()
}

function drag(ev) {
  ev.dataTransfer.setData('dragID', ev.target.id)
  offset = [
    ev.target.offsetLeft - ev.clientX,
    ev.target.offsetTop - ev.clientY
  ]
}

function drop(ev) {
  ev.preventDefault()
  const data = ev.dataTransfer.getData('dragID')
  ev.target.appendChild(document.getElementById(data))
}
</script>

CSS

.target {
  width: 100px;
  height: 100px;
  border: 1px solid #aaaaaa;
  padding: 10px;
}

.element {
  width: 100px;
  height: 100px;
}