JSFiddle - React, Tailwind, and code Playground

by bkaz

HTML

<div id="drag" draggable="true" class="box">D</div>
<span>&lt;--- Drag me</span>
<hr>

<div class="drag-leave">
  <div id="box1" class="dropzone box">
    Drop Here
    <div id="box2" class="dropzone box">
      Drop Here
      <div id="box3" class="box">No Effect</div>
     </div>
  </div>
</div>

CSS

.box {
  border: 1px solid;
  margin: 20px;
}

#box1 {
  height: 200px;
  width: 200px;
}

#box2 {
  height: 150px;
  width: 150px;
}

#box3 {
  height: 80px;
  width: 80px;
}

.drag-leave {
  border: 1px solid;
}

.over {
  background-color: red;
}

#drag {
  display: inline-block;
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
  text-align: center;
  line-height: 2;
  margin: 10px;
}

JavaScript

$('.dropzone').on("dragenter", function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).addClass("over");
  $(".over").not(this).removeClass("over");
});

$('.drag-leave').on("dragenter", function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(".over").removeClass("over");
});