JSFiddle - React, Tailwind, and code Playground

locked aspect ration resizable JQuery

by Andrew Pougher

HTML

<script src="//raw.githubusercontent.com/ilyavolodin/jquery-ui-extras/master/jquery.ui.rotatable.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/cupertino/jquery-ui.css">
<div id="artboard" style="background-color:#c1f3ff;">
<div id="rnd" style="display:inline-block;">
<span id="img_rnd" style="display:inline-block;border:1px solid red;background-image: url('https://placehold.it/200/decedd');background-size:100% auto;min-width:90px;min-height:90px;background-repeat:no-repeat" class="topme"></span>
</div>
</div>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}
#artboard {
  position: relative;
  height:100vh;
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  overflow: hidden;
}
.ui-resizable-handle
{
    position: absolute;
    border: 1px solid black;
    background-color: white; 
      border-radius: 50%;
    width:20px;
    height:20px
}

JavaScript

$('#img_rnd').resizable({aspectRatio: true,handles: "ne, nw, se,sw"});
$('#rnd').draggable({
handles: "all",
       containment: "#artboard",
        cursor: "move",
		stack: ".topme", // z-index at last! 
        opacity: 0.3,
             scroll: false,
  start: function(event, ui) {
    isDraggingMedia = true;
  },
  stop: function(event, ui) {
    isDraggingMedia = false;
    // blah
  }
}).rotatable({ });