<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>