JSFiddle - React, Tailwind, and code Playground

HTML

<div id='drop'>Drop here</div>
<div id='drag'>Drag me</div>

CSS

div {
    position: absolute;
}

div#drag {
    width: 50px;
    height: 50px;
    background-color: blue;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation: sway 1s infinite alternate;
}

div#drop {
    width: 100px;
    height: 100px;
    background-color: green;
    left: 200px;
    top: 200px;
    transform: perspective(50vh) rotateX(45deg) rotateZ(0deg);
}

div#drag.in-drop-zone {
    background-color: yellow;
}

@-webkit-keyframes sway {
    from {
        -webkit-transform: rotate(-30deg);
    }
    to {
        -webkit-transform: rotate(30deg);
    }
}

JavaScript

var drag = document.getElementById('drag');
var drop = document.getElementById('drop');
var drop_bbox = drop.getBoundingClientRect();

window.addEventListener('touchmove', move, true);
window.addEventListener('mousemove', move, true);

function move(e) {
    drag.style.left = e.clientX - 25 + 'px';
    drag.style.top = e.clientY - 25 + 'px';
    var drag_bbox = e.target.getBoundingClientRect();
    drag.className = rectsIntersect(drag_bbox, drop_bbox) ? "in-drop-zone" : null;
}

 function rectsIntersect(r1, r2) {
  if (!r1 || !r2) return false;
	return r2.left < (r1.left+r1.width) && 
		(r2.left+r2.width) > r1.left &&
		r2.top < (r1.top+r1.height) &&
		(r2.top+r2.height) > r1.top;
};