JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div id="layout-area">

  <div id="table" class="square resize"> </div>

</div>
<div id="start">Waiting for dragging the image get started...</div>
<div id="start">Waiting for dragging the image get started...</div>
<div id="current">Waiting image getting dropped...</div>

CSS

#table-type {
  float: left;
  margin-left: 20px;
  border: 1px solid #333;
  text-align: center;
}

.round {
  width: 80px;
  height: 80px;
  border-radius: 1000px;
  background: #CCC;
  border: 3px solid #eee;
}

.square {
  width: 80px;
  height: 80px;
  background: #CCC;
  border: 3px solid #eee;
}

.rounded {
  width: 80px;
  height: 80px;
  border-radius: 1000px;
  background: #CCC;
  border: 3px solid #eee;
}

.squared {
  width: 80px;
  height: 80px;
  background: #CCC;
  border: 3px solid #eee;
}

.round:hover {
  background: #84f784;
}

.square:hover {
  background: #84f784;
}

#table {}

p {
  font-size: 12px;
  font-family: Helvetica;
  color: #333;
}

#layout-area {
  width: 100%;
  max-width: 900px;
  height: 550px;
  background: #333;
  border: 3px solid #CCC;
  margin: auto;
  position: relative;
  margin-top: 100px;
}

#types-of-tables {
  width: 1000px;
  margin: auto;
}

.ui-resizable-helper {
  border: 1px dotted gray;
}

JavaScript

$(init);

function init() {
  $('.square, .round').draggable({
    containment: '#layout-area',
    start: function(event, ui) {

      // Show start dragged position of image.
      var Startpos = $(this).position();
      $("div#start").text("START: \nX: " + Startpos.left + "\nY: " + Startpos.top);
    },
    drag: function(event, ui) {
      var Startpos = $(this).position();
      $("div#current").text("Current: \nX: " + Startpos.left + "\nY: " + Startpos.top);
    },
    // Find position where image is dropped.
    stop: function(event, ui) {

      // Show dropped position.
      var Stoppos = $(this).position();
      $("div#stop").text("CURRENT: \nX: " + Stoppos.left + "\nY: " + Stoppos.top);
    }

  });
}
$(document).ready(function() {
  var params = {
    // Callback fired on rotation start.
    start: function(event, ui) {},
    // Callback fired during rotation.
    rotate: function(event, ui) {},
    // Callback fired on rotation end.
    stop: function(event, ui) {},
    drag: function(event, ui) {}
  };
  $('#table, #table1, #table2, #table3, #table4, #table5').rotatable(params);

});