JQuery UI resizable example

by Apeksha Shah

HTML

<div class='croppable-container' style='position: relative;' id='divCropParent'>
  <div class="croppable">
    <img data-id="38271" src="http://devdm.canamsoftware.com/portals/0/Images/HomePage/Right-Bottom.jpg" /></div>
</div>

CSS

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

#resize {
  background-color: #ccc;
  position: absolute;
}

.demodiv {
  height: 150px;
  width: 150px;
  float: left;
  margin-left: 5px;
}

.cropper {
  opacity: .4;
  background: #222;
  border: 2px solid #000;
  //position: absolute;
}

.croppable-container {
  border: 1px solid #333;
  position: absolute;
  width: 300px;
  height: 300px;
}

.croppable {
  //position: relative;
}

JavaScript

(function($) {
  $.fn.croppable = function(settings) {
        var position = {
      x: 10,
      y: 10
    };

    //$(this).wrap("<div class='croppable-container' style='position: relative;' id='divCropParent'   />");

    var cropper = $("<div style='position: absolute; top: " + position.y + "px; left: " + position.x + "px; height: 50px; width: 50px;' class='cropper' />");
    $(this).before(cropper);

    /*var save = $("<input type='button' value='Crop Selection'/>");
    save.click(function() {
      $.post("/your/service/location", {
          img: id,
          x: cropper.position().left,
          y: cropper.position().top,
          height: settings.square
        },
        function(data) {
          if (settings.success != null) {
            settings.success(data);
          }
        }
      );
    });*/

    //$(this).parent().width($(this).width());
    //$(this).parent().height($(this).height());
    cropper.draggable({
      containment: "parent"
    });

    cropper.resizable({
      helper: "ui-resizable-helper",
      aspectRatio: 1 / 1,
      containment: "#divCropParent"
    });
    //$(this).parent().after(save);
  };
})(jQuery);

$(".croppable").croppable();