Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.08.2011, 18:50
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

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

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

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

}

Последний раз редактировалось Magneto, 01.09.2011 в 02:13.
Ответить с цитированием
  #2 (permalink)  
Старый 01.09.2011, 01:15
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Magneto Посмотреть сообщение
Смотрите пример
прошу перенести на jsfiddle

Сообщение от Magneto Посмотреть сообщение
1. Если очень сильно уменьшать блок то он схлопнется.
не задетектил. как скукоживается, так и раскукоживается

Сообщение от Magneto Посмотреть сообщение
2. Иногда курсор выходит за пределы уголка но попрежнему продолжает ресайзить блок.
установить обработчик на mouseout
document.addEventListener('mouseout', upOnDocument, false);


Сообщение от Magneto Посмотреть сообщение
И как здесь на форуме сворачивать код )).
[JS *!*hide*/!*]
code
[/JS]


Сообщение от Magneto Посмотреть сообщение
3. У меня получилось четыре (по одной на каждый уголок) практически идентичные функции, возможно их можно склеить.
ни одного комментария коде :/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фиксация блока DIV при сворачивании другого блока DIV kacnepbI4 jQuery 2 04.04.2011 14:15
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21
Плавный Drag & drop div элемента rootking Events/DOM/Window 10 07.09.2010 13:03
Скрытие, показ определённого div блока. Flashton Events/DOM/Window 5 11.04.2010 23:44
Границы элемента DIv gosha_kap Общие вопросы Javascript 1 06.07.2009 17:12