<div id='foo' style='background: #555555; width: 50px; height: 50px; position: absolute; top: 300px; left: 300px;'>  
</div>  
<script type="text/javascript">  
(function ($) {  
  $.fn.resizable = function () {  
  return this.each(function () {  
  $("div.resizer-y").css("height", "3px");  
  // При mouseup документа разрешаем выделение текста и снимаем обработчик mousemove  
  $(document).mouseup(function () {  
  $(document).unbind("mousemove", document.resize).unbind("mousedown", document.preventSelect);  
  $("body").css("cursor", "default");  
  });  
  var offset = $(this).offset(),  
  height = $(this).height(),  
  width = $(this).width(),  
  t = $(this),  
  IE = document.all && !window.opera,  
  pad = IE ? 2 : 0,  
  // Хак для IE8 — в нём ресайзеры Y и Z становятся невозможно широкими  
  yInner = IE ? "<div class='resizer-y' style='width: " + width + "px; position: absolute; height: 2px; top: " + ( offset.top + height ) + "px; left: " + offset.left + "px;'><div style='border: 1px solid orange; cursor: n-resize;'></div></div>" : "<div class='resizer-y' style='position: absolute; background: orange; height: 2px; width: " + width + "px; top: " + ( offset.top + height ) + "px; left: " + offset.left + "px; cursor: n-resize;'></div>",  
  zInner = IE ? "<div class='resizer-z' style='position: absolute; height: 2px; width: 2px; top: " + (offset.top + height) + "px; left: " + (offset.left + width) + "px; cursor: nw-resize;'><div style='border: 1px solid red;'></div></div>" : "<div class='resizer-z' style='position: absolute; background: red; height: 2px; width: 2px; top: " + (offset.top + height) + "px; left: " + (offset.left + width) + "px; cursor: nw-resize;'></div>",  
  res; // Объект со ссылками на ресайзеры  
  $("body").append(res = $(yInner + "<div class='resizer-x' style='position: absolute; background: orange; width: 2px; height: " + height + "px; top: " + offset.top + "px; left: " + ( offset.left + width ) + "px; cursor: e-resize;'></div>" + zInner));  
  // Если нажали на ресайзер, то…  
  res.mousedown(function (event) {  
  var pos = $(this).offset(),  
  axis = this.className.slice(-1),  
  x = axis == "x", y = axis == "y", z = axis == "z"  
  posit = [event.pageX - pos.left, event.pageY - pos.top],  
  $this = $(this);  
  // Присваиваем body соотв. стиль курсора  
  $("body").css("cursor", (axis == "x" ? "e" : axis == "y" ? "n" : "nw") + "-resize");  
  // Запрещаем выделение текста на время ресайзинга  
  $(document).mousedown(document.preventSelect = function (e) {  
  e.preventDefault();  
  }).mousemove(document.resize = function (evt) {  
  // Если захотели изменить размеры в другую сторону — прерываем выполнение функции  
  if (evt.pageX < offset.left || evt.pageY < offset.top) return;  
  // Переменные для стилей самого элемента и ресайзера  
  var stylesPos = {}, stylesSize = {};  
  if ( x || z ) {  
  stylesPos.left = evt.pageX - posit[0] + pad;  
  stylesSize.width = evt.pageX - offset.left;  
  // Изменяем ширину ресайзера Y  
  $(res[0]).css("width", evt.pageX - $(res[0]).offset().left);  
  }  
  if ( y || z ) {  
  stylesPos.top = evt.pageY - posit[1] + pad;  
  stylesSize.height = evt.pageY - offset.top;  
  // Изменяем высоту ресайзера X  
  $(res[1]).css("height", evt.pageY - $(res[1]).offset().top);  
  }  
  // Изменяем стили ресайзера  
  $this.css( stylesPos );  
  // Изменяем стили самого элемента  
  t.css( stylesSize );  
  if ( z ) {  
  // Если нажат ресайзер Z, меняем остальным ресайзерам координаты  
  $(res[0]).css("top", evt.pageY);  
  $(res[1]).css("left", evt.pageX);  
  }  
  // Если нажаты ресайзеры X или Y, меняем координаты ресайзера Z  
  if ( x ) $(res[2]).css( "left", evt.pageX );  
  if ( y ) $(res[2]).css( "top", evt.pageY );  
  });  
  })  
  });  
  };  
})(jQuery);  
$("#foo").resizable();  
</script>