[Magneto]

Подскажите как правильно ресайзить элемент.

На странице создаются однотипные блоки, дивы с уголками тоже из дивов.
Смотрите пример. Если схватить блок за один из уголков то можно изменять размер блока. Я практически все реализовал но есть нюансы:

1. Если очень сильно уменьшать блок то он схлопнется.
2. Иногда курсор выходит за пределы уголка но попрежнему продолжает ресайзить блок.
3. У меня получилось четыре (по одной на каждый уголок) практически идентичные функции, возможно их можно склеить.

Нужно исправить эти мелочи.

P.S. Возможно есть статьи на эту тему, дайте ссылку. Я искал не нашел.
И как здесь на форуме сворачивать код )).

На всякий случай код:

<div id="block">
    <div id="lt" class="angle"></div>
    <div id="tr" class="angle"></div>
    <div id="rb" class="angle"></div>
    <div id="bl" class="angle"></div>
  </div>

window.onload = function () {

  function gID(id) { return document.getElementById(id); }

  var block = gID('block'),
      lt = gID('lt'),
      tr = gID('tr'),
      rb = gID('rb'),
      bl = gID('bl');




  // Ресайз за левый верхний уголок
  function resizeLT(e) {
    if (e.which == 1) {
      var mousePositionX = e.pageX,
          mousePositionY = e.pageY;

      function moveOnDocument(e) {
        var moveX = e.pageX - mousePositionX,
            moveY = e.pageY - mousePositionY,
            blockWidth = block.offsetWidth - 2 - moveX,
            blockHeight = block.offsetHeight - 2 - moveY,
            blockLeft = block.offsetLeft + moveX,
            blockTop = block.offsetTop + moveY;

        mousePositionX = e.pageX,
        mousePositionY = e.pageY;

        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';

        block.style.left = blockLeft + 'px';
        block.style.top = blockTop + 'px';
      }

      document.addEventListener('mousemove', moveOnDocument, false);

      function upOnDocument() {
        document.removeEventListener('mousemove', moveOnDocument, false);
      }

      document.addEventListener('mouseup', upOnDocument, false);

      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  lt.addEventListener('mousedown', resizeLT, false);




  // Ресайз за верхний правый уголок
  function resizeTR(e) {
    if (e.which == 1) {
      var mousePositionX = e.pageX,
          mousePositionY = e.pageY;

      function moveOnDocument(e) {
        var moveX = e.pageX - mousePositionX,
            moveY = e.pageY - mousePositionY,
            blockWidth = block.offsetWidth - 2 + moveX,
            blockHeight = block.offsetHeight - 2 - moveY,
            //blockLeft = block.offsetLeft + moveX,
            blockTop = block.offsetTop + moveY;


        mousePositionX = e.pageX,
        mousePositionY = e.pageY;

        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';

        //block.style.left = blockLeft + 'px';
        block.style.top = blockTop + 'px';
      }

      document.addEventListener('mousemove', moveOnDocument, false);

      function upOnDocument() {
        document.removeEventListener('mousemove', moveOnDocument, false);
      }

      document.addEventListener('mouseup', upOnDocument, false);

      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  tr.addEventListener('mousedown', resizeTR, false);




  // Ресайз за прваый нижний уголок
  function resizeRB(e) {
    if (e.which == 1) {
      var mousePositionX = e.pageX,
          mousePositionY = e.pageY;

      function moveOnDocument(e) {
        var moveX = e.pageX - mousePositionX,
            moveY = e.pageY - mousePositionY,
            blockWidth = block.offsetWidth - 2 + moveX,
            blockHeight = block.offsetHeight - 2 + moveY;
            //blockLeft = block.offsetLeft + moveX,
            //blockTop = block.offsetTop + moveY;

        mousePositionX = e.pageX,
        mousePositionY = e.pageY;

        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';

        //block.style.left = blockLeft + 'px';
        //block.style.top = blockTop + 'px';
      }

      document.addEventListener('mousemove', moveOnDocument, false);

      function upOnDocument() {
        document.removeEventListener('mousemove', moveOnDocument, false);
      }

      document.addEventListener('mouseup', upOnDocument, false);

      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  rb.addEventListener('mousedown', resizeRB, false);




  // Ресайз за нижний левый уголок
  function resizeBL(e) {
    if (e.which == 1) {
      var mousePositionX = e.pageX,
          mousePositionY = e.pageY;

      function moveOnDocument(e) {
        var moveX = e.pageX - mousePositionX,
            moveY = e.pageY - mousePositionY,
            blockWidth = block.offsetWidth - 2 - moveX,
            blockHeight = block.offsetHeight - 2 + moveY,
            blockLeft = block.offsetLeft + moveX;
            //blockTop = block.offsetTop + moveY;

        mousePositionX = e.pageX,
        mousePositionY = e.pageY;

        block.style.width = blockWidth + 'px';
        block.style.height = blockHeight + 'px';

        block.style.left = blockLeft + 'px';
        //block.style.top = blockTop + 'px';
      }

      document.addEventListener('mousemove', moveOnDocument, false);

      function upOnDocument() {
        document.removeEventListener('mousemove', moveOnDocument, false);
      }

      document.addEventListener('mouseup', upOnDocument, false);

      e.preventDefault();
      e.stopPropagation();
      return false;
    }
  }
  bl.addEventListener('mousedown', resizeBL, false);

}