JSFiddle - React, Tailwind, and code Playground

by shivanraptor

HTML

<div id="profile_frame">
    <div id="draggable" style="display:inline-block">
        <img id="resizable" src="http://www.extremewebdesigners.com/blog/wp-content/uploads/2010/01/google-logo-transparent.png" />
    </div>
</div>
<div id="txt_debug"></div>

CSS

#profile_frame {
    width: 500px;
    height: 500px;
    border: 1px solid #F00;
    overflow: hidden;
}

JavaScript

var l = 0;
var t = 0;
var w = 0;
var h = 0;
$(function () {
    $('#draggable').draggable({
        containment: "#profile_frame",
        scroll: false,
        stop: function (event, ui) {
            l = ui.position.left;
            t = ui.position.top;
            debugPosition();
        }
    });
    $("#resizable").resizable({
        aspectRatio: true,
        minWidth: 200,
        maxWidth: 500,
        stop: function (event, ui) {
            w = ui.size.width;
            h = ui.size.height;
            debugPosition();
        }
    });
});

function debugPosition() {
    $('#txt_debug').html('Left: ' + l + ', Top: ' + t + ', Width: ' + w + ', Height: ' + h);
}