JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="dragSource">
  <div id="squareDragSource"></div>
</div>
<div id="workspace"></div>

CSS

#dragSource {
  width: 25%;
  height: 100%;
  background-color: #ddd;
  position: relative;
  float: left;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#squareDragSource,.square {
  width: 10vw;
  height: 10vw;
  background: #333;
  margin: auto;
  position: relative;
  top: 50%;
  -o-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

#workspace {
  height: 100%;
  background-color: #ccc;
  width: 75%;
  float: right;
}

*{
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

JavaScript

window.addEventListener('load', function() {
  var squareSource = document.getElementById('squareDragSource');
  var activeElement = false;
  var xyClickCoord = {
    x: 0,
    y: 0
  };
  var mouseDown = false;
  var newSource = false;
  window.addEventListener('mousedown', function(e) {
		mouseDown = true;
    activeElement = e.target;
  });
  window.addEventListener('mouseup', function(e) {
		mouseDown = false;
  });
  window.addEventListener('mousemove', function(e) {
		if(mouseDown == true){
      console.log('mouse is down');
      if(activeElement.id == 'squareDragSource'){
        console.log('square drag source')
        if(newSource == false){
          //element does not exist; clone drag source
          var newDragSource = document.createElement('div');
          newDragSource.className = 'square';
          document.body.appendChild(newDragSource);
          newSource = newDragSource;
        }
      }
    }
  });
});