JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<div id="test-object" class="page-left sec-header">
</div>

CSS

#test-object {
  display: block;
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
  left: 0px;
  top: 0px;
}

.page-left {
  margin-left: 100px;
}

.sec-header {
  margin-top: 50px;
 }
}

JavaScript

$(function(){
	$('#test-object')
  .draggable({
  	drag: function(e,ui){
    	console.log('x pos:'+ui.position.left+', y pos:'+ui.position.top);
    }
  }).resizable({
  	resize: function(e,ui){
    	console.log('x pos:'+ui.position.left+', y pos:'+ui.position.top+', w:'+ui.size.width+', h:'+ui.size.height);
    }
  });
});