(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);