Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Ресайз элементов, как?код есть но не работает (https://javascript.ru/forum/dom-window/21261-resajjz-ehlementov-kak-kod-est-no-ne-rabotaet.html)

Александр х@к 02.09.2011 22:10

Ресайз элементов, как?код есть но не работает
 
<!DOCTYPE HTML>
<html>
<body>
<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>
<script>
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);
 
}
</script> 

</body>
</html>


Но блок вообще не выводит
Я хочу,как здесь: http://dl.dropbox.com/u/6001712/demo/resize/index.html

Magneto 02.09.2011 22:15

Щас я прикрою лавочку :)

У тебя таблицы стилей не хватает. Вот ссылка на архив http://dl.dropbox.com/u/6001712/demo/resize.zip

Александр х@к 03.09.2011 16:30

подскажи код, а то качать не хочу

Magneto 03.09.2011 16:36

Что там качать? 1,54 КБ? Я тебе на блюдечке свой скрипт даю так ты еще носом ворочаеш.

Александр х@к 03.09.2011 17:00

а мне можно кодом)))


Часовой пояс GMT +3, время: 18:22.