JSFiddle - React, Tailwind, and code Playground

by moshfeu

HTML

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

CSS

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

.box.dragover:after {
  pointer-events: none;
  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);
})