JSFiddle - React, Tailwind, and code Playground

by azlar chen

HTML

<div id="drag" draggable="true">drag me</div>

<hr>

<div id="drop">
    drop here
    <p>child</p>
    parent
</div>

CSS

.red {
    background-color: red;
}

JavaScript

let parent = document.getElementById("drop"),
		drag = document.getElementById("drag");

drag.addEventListener("dragstart", (e) => {
	e.dataTransfer.allowedEffect = "copy";
  e.dataTransfer.setData("text/plain", "test");
});

parent.addEventListener("dragenter", () => {
	parent.className = "red";
});

parent.addEventListener("dragleave", (e) => {
	let rect = parent.getBoundingClientRect();
  
  console.log(e.clientX, rect.left);
  
  if(e.clientY < rect.top || e.clientY >= rect.bottom || e.clientX <= rect.left || e.clientX >= rect.right) {
		parent.className = "";
  }

});