JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<form name="enter" method="post" action="" enctype="multipart/form-data">
    <label>Tamanho da imagem</label>
    <br />
    <label>Largura:</label>
    <input size="2" type="text" id="posWimg" name="larg_img" value="200" />
    <label>Altura:</label>
    <input size="2" type="text" id="posHimg" name="altu_img" value="150" />
    <br />
    <br />
    <label>Posicionamento da imagem</label>
    <br />
    <label>Horizontal:</label>
    <input size="2" type="text" id="posXimg" name="hori_img" value="204" />
    <label>Vertical:</label>
    <input size="2" type="text" id="posYimg" name="vert_img" value="156" />
    <br />
    <br />
    <input class="input" type="submit" name="enter" value="Atualizar" />
</form>
<br />
<div id="imgWrapper">
    <img width="200" height="150" title="CPanel" align="left" src="/favicon.png" id="img" class="ui-draggable ui-draggable-handle" />
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
#img {
    cursor: move;
    position: absolute;
    left: 204px;
    top: 156px;
}

JavaScript

$(window).load(function () {
    $('#imgWrapper').draggable({
        drag: function (e) {
            var offset = $(this).find('img').offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posXimg').val(xPos);
            $('#posYimg').val(yPos);
        }
    });


    var startW = 0;
    var startH = 0;
    $('#img').resizable({
        //Other options
        start: function (event, ui) {
            startW = $(this).outerWidth();
            startH = $(this).outerHeight();
        },
        stop: function (event, ui) {
            var endW = $(this).outerWidth();
            var endH = $(this).outerHeight();

            $('#posWimg').val(endW - startW);
            $('#posHimg').val(endH - startH);

        }
    });
});