JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="projectContainer">
  <div id="dragSourceContainer">
    <div id="squareSource" data-shape="square"></div>
    <div id="circleSource" data-shape="circle"></div>
  </div>
  <div id="workspaceContainer">
    <div id="workspace"></div>
  </div>
</div>

CSS

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

#projectContainer {
  width: 100%;
  height: 100%;
  background-color: #eee;
}

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#dragSourceContainer {
  width: 25%;
  height: 100%;
  background: #ddd;
  float: left;
}

#squareSource {
  width: 10vw;
  height: 10vw;
  margin: auto;
  background-color: #333;
  -o-transition: border .3s ease;
  -moz-transition: border .3s ease;
  -webkit-transition: border .3s ease;
  -ms-transition: border .3s ease;
  transition: border .3s ease;
}

#circleSource {
  width: 10vw;
  height: 10vw;
  background-color: #333;
  border-radius: 50%;
  margin: auto;
}

.square {
  position: absolute;
  width: 10vw;
  height: 10vw;
  background-color: #333;
}

.circle {
  width: 10vw;
  height: 10vw;
  background-color: #333;
  position: absolute;
  border-radius: 50%;
}

#workspaceContainer {
  float: right;
  background-color: #eee;
  width: 75%;
  height: 100%;
  overflow: auto;
}

#workspace {
  height: 200%;
  width: 100%;
  overflow: hidden;
}

[data-long-transition] {
  -o-transition: all .1s ease-in;
  -moz-transition: all .1s ease-in;
  -webkit-transition: all .1s ease-in;
  -ms-transition: all .1s ease-in;
  transition: all .1s ease-in;
}

[data-active] {
  opacity: .7;
}

JavaScript

window.addEventListener('load', function() {
  var workspace = document.getElementById('workspace');
  var status = {
    activeElement: false, //the element that was last clicked
    elemBeingDragged: false, //the element that is being dragged
    mouseDown: false, //current status of the mouse
    resetVariables: function() { //reset the object's elements
      this.activeElement = false;
      this.elemBeingDragged = false;
    },
    cursorPosition: {
      x: 0,
      y: 0
    },
    resetCursorPosition: function(x, y) {
      this.cursorPosition.x = x;
      this.cursorPosition.y = y;
    },
    cursorClickPosition: {
      x: 0,
      y: 0
    }
  };

  //the sources of the elements
  var dragSources = {
    elementSources: {
      squareSource: document.getElementById('squareSource'),
      circleSource: document.getElementById('circleSource')
    },
    ifDragSource: function(elem) {
      var i;
      var found = false;
      for (i in this.elementSources) {
        if (elem === this.elementSources[i]) {
          found = true;
        }
      }
      return found;
    },
    getElementSourceType: function(elem) {
      if (elem.hasAttribute('data-shape')) {
        return elem.getAttribute('data-shape');
      } else {
        return 'undefined shape';
      }
    },
    setSourceElementPos: function() {
      alert('test');
    }
  };

  var workspaceMethods = {
    hideWorkspaceElements: function() {
      var workspaceElements = document.querySelectorAll("[data-workspace-shape]");
      for (var i = 0; i < workspaceElements.length; i++) {
        workspaceElements[i].style.display = 'none';
      }
    },
    showWorkspaceElements: function() {
      var workspaceElements = document.querySelectorAll('[data-workspace-shape]');
      for (var i = 0; i < workspaceElements.length; i++) {
        workspaceElements[i].style.display = 'block';
      }
    },
    getWorkspaceShapes:function(){
      return...