JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div style="height:198px;width:940px;border-style: solid;border-width: 1px;border-color: black; display:inline-block">
<div id="esee_header_banner" style="display:inline-block; position:relative; vertical-align:middle;height:198px;width:940px">
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1024x768-a.png" style="z-index:99;position:absolute;top:0px;left:0px;height:198px" />
<img id="Logo" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" style="z-index:1001;position:absolute;top:0px;left:0px;height:176px;width:155px" />
</div> <input id="logo_top" value="0"/> <input id="logo_left" value="0"/> <input id="logo_height" value="176"/> <input id="logo_width" value="155"/> <script type="text/javascript">Enable_Logo_Movement("Logo","logo_top","logo_left","logo_height","logo_width");</script></div>
JavaScript
var IMG, TOP, LEFT, HEIGHT, WIDTH;
window['Enable_Logo_Movement']=function(img, top, left, height, width) {
IMG = document.getElementById(img);
if (IMG != null) {
TOP = document.getElementById(top);
LEFT = document.getElementById(left);
HEIGHT = document.getElementById(height);
WIDTH = document.getElementById(width);
IMG.style.effectAllowed = "move";
$(document).ready(function() {
var img = "#" + IMG.id;
$(img).resizable({
containment: 'parent',
stop: function(event, ui) {
HEIGHT.value = ui.size.height;
WIDTH.value = ui.size.width;
}
});
$(img).parent().css( "zIndex", 1001 ).draggable({
containment: 'parent',
stop: function(event, ui) {
LEFT.value = ui.position.left;
TOP.value = ui.position.top;
}
});
});
};
}