JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<div id="dragThis">
<ul>
    <li id="posX"></li>
    <li id="posY"></li>
    <li id="finalX"></li>
    <li id="finalY"></li>
</ul>
</div>
<div id="dropHere"></div>

CSS

#dragThis {
        width: 6em;
        height: 6em;
        padding: 0.5em;
        border: 3px solid #ccc;
        border-radius: 0 1em 1em 1em;
        background-color: #fff;
        background-color: rgba(255,255,255,0.5);
    }

    #dropHere {
        width: 12em;
        height: 12em;
        padding: 0.5em;
        border: 3px solid #f90;
        border-radius: 1em;
        margin: 0 auto;
    }

JavaScript

$(document).ready(function() {
	
		$('#dragThis')
		.resizable({
			stop: function(event, ui) {
				var w = $(this).width();
				var h = $(this).height();
				console.log('StopEvent fired')
				console.log('Width:'+w);
				console.log('Height:'+h)    
			}
		})
		.draggable({
			containment: $('body'),
			drag: function(){
				var offset = $(this).offset();
				var xPos = offset.left;
				var yPos = offset.top;
				$('#posX').text('x: ' + xPos);
				$('#posY').text('y: ' + yPos);
			},
			stop: function(){
				var finalOffset = $(this).offset();
				var finalxPos = finalOffset.left;
				var finalyPos = finalOffset.top;
				$('#finalX').text('Final X: ' + finalxPos);
				$('#finalY').text('Final X: ' + finalyPos);
			}
		});
		
		$('#dropHere').droppable({
			accept: '#dragThis',
			over : function(){
				$(this).animate({
					'border-width' : '5px',
					'border-color' : '#0f0'
				}, 500);
				$('#dragThis').draggable('option','containment',$(this));
			}
		});
		
	});