myresizable.js

(function($){
  
  var $current = null;
  
  var start_x = 0;
  var start_y = 0;
  var start_w = 0;
  var start_h = 0;
    
	$.fn.myresizable = function(settings){
	  
		//settings = $.extend( {}, $myresizable.defaults, settings );

    this.find('.resizer').mousedown(function(e) {
      var $resizer = $(this);
      $current = $resizer.parent();
      $current.disableSelection();
      
      start_x = e.screenX;
      start_y = e.screenY;
      start_w = $current.width();
      start_h = $current.height();      
		  settings.aspect = settings.aspect || (start_w/start_h);
  	 
  	  if(settings.start) {
  	    settings.start.apply($current);
	    }
    });

    $(window).mouseup(function() {
      $current = null;
      
  	  if(settings.stop) {
  	    settings.stop.apply($current);
	    }
    });
    
    function update(new_x,new_y) {
  	  if(!$current)
  	    return;
	    	  
  	  var aspect = settings.aspect;

  	  var diff_x = new_x - start_x;
  	  var diff_y = new_y - start_y;

  	  if(diff_x < diff_y*aspect) {
  	    diff_x = diff_y * aspect;
  	  }
  	  else {
  	    diff_y = diff_x / aspect;
      }

  	  var new_width = start_w + diff_x;
  	  var new_height = start_h + diff_y;

  	  if(settings.resize) {
  	    var callback = settings.resize.apply($current, [new_width, new_height]);
	    }
	    
	    if(callback !== false) {
  	    $current.width(new_width);
  	    $current.height(new_height);
	    }
    }
    
  	$(window).mousemove(function(e) {
  	  update(e.screenX, e.screenY);
  	});
	
    $(window).bind('mousewheel',function(e) {
  	  update(e.screenX, e.screenY);
  	  console.log($current);
  	});
	


	  return this;
	};

})( jQuery );