JSFiddle - React, Tailwind, and code Playground

by Arindam Nayak

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 id="table2" class="square resize"> </div>
<div id="table3" class="round resize"> </div>
<div id="table4" class="round resize"> </div>
<div id="table5" class="square resize"> </div>
  <div id="table" class="square resize"> </div>
<div id="table2" class="square resize"> </div>
<div id="table3" class="round resize"> </div>
<div id="table4" class="round resize"> </div>
<div id="table5" 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);
		  
    });