JSFiddle - React, Tailwind, and code Playground
HTML
<h2>Drag the Pikachu</h2>
<div class="size">
<img src="http://img3.wikia.nocookie.net/__cb20140410195936/pokemon/images/archive/e/e1/20150101093317!025Pikachu_OS_anime_4.png" >
</div>
CSS
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
z-index:1;
}
/* Pikachu fits in the container */
.size {
height:200px;
width:200px;
}
.size img {
z-index:10;
width:100%;
}
JavaScript
$(function() {
$( ".size" ).draggable({
opacity:0.5,
drag: function(event,ui) {
$("div.size").width(500);
},
stop: function(event,ui) {
$("div.size").width(200);
}
});
$("div.size").width(200);
});