JSFiddle - React, Tailwind, and code Playground

HTML

<div id="droppable">droppable</div>
<div id="draggable">draggable</div>
<div id="output"></div>

CSS

body{
	  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
	  user-select: none;
}

JavaScript

var draggable = document.getElementById("draggable");
var droppable = document.getElementById("droppable");
var output = document.getElementById("output");
document.onmousemove=function(e){
	if(e.dragElement)
		if(e.which===1) {//console.log(e.target);
			e.dragElement.trigger("mousedrag",e);
		}else{
			e.dragElement.trigger("mousedrop",e);
			Event.prototype.dragElement=null;
		}
};
Element.prototype.on=function(eventname,fn){
	if(eventname==="mousedrag"){
		this.addEventListener("mousedown",function(){ Event.prototype.dragElement=this; });
	}this.addEventListener(eventname,function(e){ fn.apply(this,[e]);e.stopPropagation(); });
	return this;
}
Element.prototype.trigger=function(eventname,ev){
    var e;
    if(ev){
        if(eventname==="mousedrop") output.textContent+="target:"+ev.target.textContent+"\n"; //target is the element under the mouse
        e = new window[ev.constructor.name](eventname,ev);
    } else e = new Event(eventname);
    this.dispatchEvent(e); //e.target===element
    return this;
}
draggable.on("mousedrag",function(){});
draggable.on("mousedrop",function(e){ output.textContent+="target:"+e.target.textContent+"\n"; });