JSFiddle - React, Tailwind, and code Playground
HTML
<div id="frameBorder">
<div id="draggableHelper" style="display:inline-block">
<div id="image">
<img id="logo" src="http://wbridgewaterschools.org/school/images/Apple%20logo.png" />
</div>
</div>
</div>
CSS
#frameBorder {
width: 400px;
height: 400px;
border: 1px solid #F00;
}
#image {
width: 50px;
height: 50px;
border: 1px solid black;
background-size: 100% 100%;
background-image: url(http://www.google.com.br/images/srpr/logo3w.png);
}
#logo {
position: fixed;
width: 400px;
height: 400px;
opacity: .55;
}
JavaScript
$('#draggableHelper').draggable({
containment: "#frameBorder",
scroll: false
});
$('#image').resizable();