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 
  id="div1" 
  ondrop="drop(event)" 
  ondragover="allowDrop(event)"></div>
<div
     class="element"
     id="drag1"
     style="background: blue;"
     draggable="true"
     ondragstart="drag(event)"
     ondrag="dragMove(event)"></div>
<div
     class="element"
     id="drag2"
     style="background: red;"
     draggable="true"
     ondragstart="drag(event)"
     ondrag="dragMove(event)"></div>
     
<script>
const elements = document.querySelectorAll('.element')
let hasCollision = false
let offset = [0, 0]

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

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

function drop(ev) {
  ev.preventDefault()
  const data = ev.dataTransfer.getData('text')
  if (!hasCollision) {
    ev.target.appendChild(document.getElementById(data))
  }
}

function dragMove(e) {
  hasCollision = Array.prototype.some.call(elements, d => {
    if (d.id !== e.target.id) {
      return isCollide(e, d)
    }
    return false
  })
}

function isCollide(a, b) {
  const aRect = a.target.getBoundingClientRect()
  const bRect = b.getBoundingClientRect()
  return !(
    ((a.clientY + offset[1] + aRect.height) < (bRect.top)) ||
    (a.clientY + offset[1] > (bRect.top + bRect.height)) ||
    ((a.clientX + offset[0] + aRect.width) < bRect.left) ||
    (a.clientX + offset[0] > (bRect.left + bRect.width))
  )
}
</script>

CSS

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

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

JavaScript

function dragMove(e) {
  hasCollision = Array.prototype.some.call(elements, d => {
    if (d.id !== e.target.id) {
      return isCollide(e, d)
    }
    return false
  })
}