What's the best way of constantly resizing elements with the mouse?

What's the best way of constantly resizing elements using clicking and holding a resize image in the bottom-right corner of the element? Is there a specific empty element that has resizing built in or a style to use that w开发者_如何学Goould be better than using a while loop in JavaScript?

---

Here you go man:

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

Your HTML needs to look like:

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

Neither one needs to be a div, but the resizeable one's class needs to be "resize" and the draggable element's class needs to be "drag".

Attach it with:

Resizer.attach(element);

...where element is the one to be resized.

Works on multiple elements, as shown in the jsfiddle. You can also pass in a minimum height and minimum width. If you don't, it automatically makes them twice the height of the draggable element.

It currently does have a problem when you're scrolled all the way down. I'm not sure how to counter it, but I'll work on it more later.

---

The general approach goes something like this:

• When onmousedown fires on the resize target, start tracking onmousemove
• When onmousemove fires, resize the element
• When onmouseup fires, clear the onmousemove handler

So basically you just respond to events, there are no while loops or anything involved.

It can be somewhat tricky to accomplish so that it works nicely, so I would suggest seeing if there's a JS library you could use. A pretty simple way to get this behavior would be to use jQuery UI's resizable component