JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="childbox">
  
  </div>
</div>

CSS

.box {
  position: relative;
  width: 80%;
  height: 300px;
  border: 1px solid black;
}

    .box.dragover:after {
        position: absolute;
        background-color: rgba(0, 255, 0, 0.05);
        content: '';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

.childbox {
    position: relative;
    width: 100%;
    height: 100%;
}

JavaScript

$('.box').on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
  e.preventDefault();
  e.stopPropagation();
}).bind('dragover dragenter', function (e) {
  e.stopPropagation();
  $(this).addClass('dragover');
  console.log('\nEvent: ' + e.originalEvent.type + '   ---   Target: ' + this.className);
}).bind('dragleave dragend drop', function (e) {
  e.stopPropagation();
  $(this).removeClass('dragover');
  console.log('\nEvent: ' + e.originalEvent.type + '   ---   Target: ' + this.className);
})