JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script>
function getCoords(elem) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) };
}
window.onload = function() {
var dr;
var drag = document.getElementById('drag');
drag.addEventListener('mousedown', function(e) {
dr = true;
e = e || window.event;
var coords = getCoords(drag);
var shiftX = e.pageX - coords.left;
var shiftY = e.pageY - coords.top;
document.addEventListener('mousemove', function(e) {
if(dr) {
e = e || window.event;
drag.style.position = 'absolute';
drag.style.zIndex += 1;
drag.style.left = e.pageX - shiftX + 'px';
drag.style.top = e.pageY - shiftY + 'px';
var drop = document.getElementById('drop');
var dropX = drop.style.left;
var dropY = drop.style.top;
var dropW = drop.style.width;
var dropH = drop.style.height;
var dragX = drag.style.left;
var dragY = drag.style.top;
var dragW = drag.style.width;
var dragH = drag.style.height;
var data = 'dropX: '+dropX+'<br>'+
'dropY: '+dropY+'<br>'+
'dropW: '+dropW+'<br>'+
'dropH: '+dropH+'<br><br>'+
'dragX: '+dragX+'<br>'+
'dragY: '+dragY+'<br>'+
'dragW: '+dragW+'<br>'+
...