Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- What's the best way of constantly resizing elements with the mouse?
- 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]);
- }
- <div class="resize"><
- div class="drag"></div>
- </div>
- Resizer.attach(element);
Add Comment
Please, Sign In to add comment