JQuery UI resizable example

by Apeksha Shah

HTML

<div id="divParent">
  <img src="http://dnn803/desktopmodules/mvc/canam.tilelayout/temp/1000825_431802940261078_1702101362_n.jpg" />
</div>
<div id="resize" class="demodiv">Crop area</div>
</div>

CSS

.ui-resizable-helper {
  border: 1px dotted #999;
}

#resize {
  background-color: #ccc;
  opacity: 0.5;
}

.demodiv {
  height: 170px;
  width: 380px;
  position: relative;
}

#divParent {
  border: 1px solid;
  position: absolute;
  width: 750px;
}

JavaScript

$('#resize').resizable({
  helper: "ui-resizable-helper",
  aspectRatio: 38 / 17,
  containment: "#divParent"
}).draggable({
  containment: "#divParent"
});