JSFiddle - React, Tailwind, and code Playground

by ivanovsuper

HTML

<div id="drag" style="background-color: red; width: 100px; height: 50px;"></div>
<div id="drop" style="background-color: green; width: 200px; height: 200px; left: 150px; top: 100px; position: absolute;"></div>

JavaScript

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>'+
                           'dragH: '+dragH+'<br>';
 
         ...