Каков лучший способ постоянно изменять размеры элементов с помощью мыши? - PullRequest
Новая
       4

Каков лучший способ постоянно изменять размеры элементов с помощью мыши?

0 голосов
/ 02 октября 2011

Каков наилучший способ постоянного изменения размера элементов с помощью нажатия и удержания изображения изменения размера в правом нижнем углу элемента? Есть ли конкретный пустой элемент со встроенным изменением размера или стиль, который будет лучше, чем использование цикла while в JavaScript?

Ответы [ 2 ]

3 голосов
/ 02 октября 2011

Вот, пожалуйста, человек:

http://jsfiddle.net/d9hsG/

function c(a){console.log(a)}
function coords(el){
    var curleft, curtop;
    curleft=curtop=0;
    do{
        curleft+=el.offsetLeft;
        curtop+=el.offsetTop;
    } while(el=el.offsetParent);
    return [curleft,curtop];
}
Resizer = {
    attach: function(el,minh,minw){
        var rs=el.resizer=el.getElementsByClassName('drag')[0];
        rs.resizeParent=el;
        if(minh==undefined){
            el.minh=rs.offsetHeight*2;
        }
        if(minw==undefined){
            el.minw=rs.offsetWidth*2;
        }
        rs.onmousedown = Resizer.begin;


    },
    begin: function(e){
        var el=Resizer.el=this.resizeParent;
        var e=e||window.event;
        this.lastx=e.clientX;
        this.lasty=e.clientY;
        document.onmousemove=Resizer.resize;
        document.onmouseup=Resizer.end;
        return false;


    },
    resize: function(e){
        var e = e || window.event;
        var x,y,mx,my,el,rs,neww,newh;
        el=Resizer.el;
        rs=el.resizer;
        mx=e.clientX;
        my=e.clientY;
        neww=(el.clientWidth-(rs.lastx-mx));
        newh=(el.clientHeight-(rs.lasty-my));
        if(neww>=el.minw){     
            el.style.width=neww+'px';
            rs.lastx=mx;
        }
        else{
            rs.lastx-=parseInt(el.style.width)-el.minw;
            el.style.width=el.minw+'px';

        }
        if(newh>=el.minh){
            el.style.height=newh+'px';
            rs.lasty=my;
        }
        else{
            rs.lasty-=parseInt(el.style.height)-el.minh;
            el.style.height=el.minh+'px';

        }

        return false;


    },
    end: function(){
        document.onmouseup=null;
        document.onmousemove=null;
    }
};
window.onload=function(){
    Resizer.attach(document.getElementsByClassName('resize')[0]);
}

Ваш HTML должен выглядеть следующим образом: 

<div class="resize"><
    div class="drag"></div>
</div>

Никто не должен быть div, но класс изменяемого размера должен быть "resize", а класс перетаскиваемого элемента должен быть "drag".

Прикрепите его с помощью: 

Resizer.attach(element);

... где элемент - это размер, который нужно изменить.

Работает с несколькими элементами, как показано в jsfiddle. Вы также можете передать минимальную высоту и минимальную ширину. Если вы этого не сделаете, он автоматически удваивает высоту перетаскиваемого элемента.

В настоящее время проблема возникает при прокрутке вниз. Я не уверен, как противостоять этому, но я буду работать над этим позже.

0 голосов
/ 02 октября 2011

Общий подход выглядит примерно так:

  • Когда на цели изменения размера запускается одноразовое падение, начинайте слежение за перемещением
  • При срабатывании onmousemove изменить размер элемента
  • Когда срабатывает onmouseup, очистить обработчик onmousemove

Таким образом, в основном вы просто реагируете на события, в них нет циклов while или чего-либо еще.

Это может быть несколько сложно сделать, чтобы все работало хорошо, поэтому я бы посоветовал посмотреть, есть ли библиотека JS, которую вы могли бы использовать. Довольно простым способом получить такое поведение было бы использование изменяемого размера компонента jQuery UI

...