Среда, 06 Февраля 2013 00:00

Resizer на JavaScript

Written by 
Оцени эту запись
(2 Голоса)

Задача: сделать ресайзер (resizer) блока на JavaScript. Должен тянуться за горизонтальные и вертикальные грани, за уголки, а также перемещаться. 

Метод решения: определяем в какой части блока пользователь нажал кнопку мышки и в какую сторону начал перемещать. Блок абсолютно спозиционирован, при перемещении и растягивании меняются значения left, top, width, height.

 

 

 

 

 

 

 

 

 

 

Для примера отображения ставлю элементу позиционирование fixed(чтобы на него не действовали родительские relative). Голубой квадратик в левом углу страницы можно перемещать или растягивать/уменьшать. Также вы можете в конце статьи скачать HTML файл с живым примером ресайзера на отдельной странице. 

 

 

Ниже приведу функцию Resize:

 

 

     function Resize() {
            var a = document.getElementById('area');
            var startX, startY, movewidth, moveheight, moveleft, movetop, curpos, is_move, move_type;
            movewidth = moveheight = moveleft = movetop = 0;
            curpos = 0;
            is_move = -1;
            document.body.addEventListener ('mousedown', function (e) {
                is_move = 1;
                startX = e.pageX;
                startY = e.pageY;
                movewidth = a.offsetWidth;
                moveheight = a.offsetHeight;
                moveleft = a.offsetLeft;
                movetop = a.offsetTop;
                move_type = curpos;
            });
            document.body.addEventListener ('mouseup', function (e) {
                if(is_move == 1) {
                    is_move = -1;
                    move_type = 0;
                }
            });
            document.body.addEventListener ('mousemove', function(e){
                if (a.offsetLeft-10 < e.pageX && e.pageX < a.offsetLeft+10) {
                    if (a.offsetTop-10 < e.pageY && e.pageY < a.offsetTop+10) {
                        curpos = 1;
                        a.style.cursor = 'se-resize';
                    } else if (a.offsetTop+a.offsetHeight-10 < e.pageY && e.pageY < a.offsetTop+a.offsetHeight+10) {
                        curpos = 3;
                        a.style.cursor = 'ne-resize';
                    }
                    else {
                        curpos = 2;
                        a.style.cursor = 'e-resize';
                    }
                }
                if (a.offsetLeft+a.offsetWidth-10 < e.pageX && e.pageX < a.offsetLeft+a.offsetWidth+10) {
                    if (a.offsetTop-10 < e.pageY && e.pageY < a.offsetTop+10) {
                        curpos = 7;
                        a.style.cursor = 'ne-resize';
                    } else if (a.offsetTop+a.offsetHeight-10 < e.pageY && e.pageY < a.offsetTop+a.offsetHeight+10) {
                        curpos = 9;
                        a.style.cursor = 'se-resize';
                    }
                    else {
                        curpos = 8;
                        a.style.cursor = 'e-resize';
                    }
                }
                if (a.offsetLeft+10 < e.pageX && e.pageX < a.offsetLeft+a.offsetWidth-10) {
                    if (a.offsetTop-10 < e.pageY && e.pageY < a.offsetTop+10) {
                        curpos = 4;
                        a.style.cursor = 'n-resize';
                    } else if (a.offsetTop+a.offsetHeight-10 < e.pageY && e.pageY < a.offsetTop+a.offsetHeight+10) {
                        curpos = 6;
                        a.style.cursor = 'n-resize';
                    }
                    else {
                        curpos = 5;
                        a.style.cursor = 'move';
                    }
                }
                if (move_type == 1) {
                    if (e.pageX-startX > 0) {
                        moveleft++;
                        movewidth--;
                    }
                    else {
                        moveleft--;
                        movewidth++;
                    }
                    if (e.pageY-startY > 0) {
                        movetop++;
                        moveheight--;
                    }
                    else {
                        movetop--;
                        moveheight++;
                    }
                }
                if (move_type == 2) {
                    if (e.pageX-startX > 0) {
                        moveleft++;
                        movewidth--;
                    }
                    else {
                        moveleft--;
                        movewidth++;
                    }
                }
                if (move_type == 3) {
                    if (e.pageX-startX > 0) {
                        moveleft++;
                        movewidth--;
                    }
                    else {
                        moveleft--;
                        movewidth++;
                    }
                    if (e.pageY-startY > 0) {
                        moveheight++;
                    }
                    else {
                        moveheight--;
                    }
                }
                if (move_type == 4) {
                    if (e.pageY-startY > 0) {
                        movetop++;
                        moveheight--;
                    }
                    else {
                        movetop--;
                        moveheight++;
                    }
                }
                if (move_type == 5) {
                    if (e.pageX-startX > 0) {
                        moveleft++;
                    }
                    else {
                        moveleft--;
                    }
                    if (e.pageY-startY > 0) {
                        movetop++;
                    }
                    else {
                        movetop--;
                    }
                }
                if (move_type == 6) {
                    if (e.pageY-startY > 0) {
                        moveheight++;
                    }
                    else {
                        moveheight--;
                    }
                }
                if (move_type == 7) {
                    if (e.pageX-startX > 0) {
                        movewidth++;
                    }
                    else {
                        movewidth--;
                    }
                    if (e.pageY-startY > 0) {
                        movetop++;
                        moveheight--;
                    }
                    else {
                        movetop--;
                        moveheight++;
                    }
                }
                if (move_type == 8) {
                    curpos = 8;
                    a.style.cursor = 'e-resize';
                    if (e.pageX-startX > 0) {
                        movewidth++;
                    }
                    else {
                        movewidth--;
                    }
                }
                if (move_type == 9) {
                    if (e.pageX-startX > 0) {
                        movewidth++;
                    }
                    else {
                        movewidth--;
                    }
                    if (e.pageY-startY > 0) {
                        moveheight++;
                    }
                    else {
                        moveheight--;
                    }
                }
                if (is_move == 1) {
                    a.style.height = moveheight-2+'px';
                    a.style.width = movewidth-2+'px';
                    a.style.top = movetop+'px';
                    a.style.left = moveleft+'px';
                }
            });
 
     }

 

 

Коротко по коду:

 

 

Мы определяем, что должно происходить с элементом - перемещение или изменение размера. Если mousedown в центре элемента, то перемещение. Если же по краю (на расстоянии 10px от края), то будем изменять размер. Если изменяется размер, то нам нужно менять левую и верхнюю координаты, ширину и высоту. Если же речь идет о перемещени, то меняются только координаты. При изменени размера нужно определить в какую сторону тянутся курсор мышки. В зависимости от этого мы изменяем разные параметры элемента. Тянуть можно в сторону увеличения или уменьшения элемента. Тянуть можно за углы (4шт), стороны (4шт) и за центр (1шт). То есть, в зависимости от положения курсора(всего 9 вариантов) при нажатии и стороны его перемещения зависят размер и положение элемента.

 

 

 

 
 

 

 

 

 

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов