Image Cropping

$('.selection').hqyDraggable({
  onDrag : function(e, source){
    var data = e.data;

    if (data.left < 0) {
      data.left = 0;
    }

    if (data.top < 0) {
      data.top = 0;
    }

    var $s = $(source),
      maxWidth = $('.demo-cropping').width(),
      maxHeight = $('.demo-cropping').height();

    if (data.left + $s.outerWidth() > maxWidth){
      data.left = maxWidth - $s.outerWidth();
    }

    if (data.top + $s.outerHeight() > maxHeight){
      data.top = maxHeight - $s.outerHeight();
    }
  }
}).hqyResizable({
  onResize : function(e){
    var data = e.data,
      maxWidth = $('.demo-cropping').width(),
      maxHeight = $('.demo-cropping').height();

    data.left = Math.max(0, data.left);
    data.top = Math.max(0, data.top);

    if (data.left + data.width > maxWidth) {
      data.width = maxWidth - data.left;
    }

    if (data.top + data.height > maxHeight) {
      data.height = maxHeight - data.top;
    }
  }
});

<div class="demo-cropping">
  <div class="selection"></div>
</div>