JSFiddle - React, Tailwind, and code Playground

by LalitNankani

HTML

<div class='dropbox' id="dropbox">
  <iframe class="inner-frame" src="www.google.com" />
</div>

CSS

.dropbox {
  border: 1px dashed grey;
  width: 220px;
  height: 220px;
}

.inner-frame {
  width: 200px;
  height: 200px;
  margin: 5px;
}

.dragging {
  border: 2px solid blue;
}

JavaScript

// Just a pseudo code to check if an element is 
// an ancestor of another in DOM Tree
// There could be much better ways of doing this.
// jQuery's contain function is one candidate
function isAncestor(node, target) {
	if (node === target) return false;
  while(node.parentNode) {
  	if (node.parentNode === target)
    	return true;
    node=node.parentNode;
  }
  return false;
}

var container = document.getElementById("dropbox");
container.addEventListener("dragenter", function() {
  container.classList.add("dragging");
});

container.addEventListener("dragleave", function(e) {
	if (!isAncestor(e.relatedTarget, container)) {
  	container.classList.remove("dragging");
  }
});