Guest User

Untitled

a guest
Aug 21st, 2018
86
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.92 KB | None | 0 0
  1. What's the best way of constantly resizing elements with the mouse?
  2. function c(a){console.log(a)}
  3. function coords(el){
  4. var curleft, curtop;
  5. curleft=curtop=0;
  6. do{
  7. curleft+=el.offsetLeft;
  8. curtop+=el.offsetTop;
  9. } while(el=el.offsetParent);
  10. return [curleft,curtop];
  11. }
  12. Resizer = {
  13. attach: function(el,minh,minw){
  14. var rs=el.resizer=el.getElementsByClassName('drag')[0];
  15. rs.resizeParent=el;
  16. if(minh==undefined){
  17. el.minh=rs.offsetHeight*2;
  18. }
  19. if(minw==undefined){
  20. el.minw=rs.offsetWidth*2;
  21. }
  22. rs.onmousedown = Resizer.begin;
  23.  
  24.  
  25. },
  26. begin: function(e){
  27. var el=Resizer.el=this.resizeParent;
  28. var e=e||window.event;
  29. this.lastx=e.clientX;
  30. this.lasty=e.clientY;
  31. document.onmousemove=Resizer.resize;
  32. document.onmouseup=Resizer.end;
  33. return false;
  34.  
  35.  
  36. },
  37. resize: function(e){
  38. var e = e || window.event;
  39. var x,y,mx,my,el,rs,neww,newh;
  40. el=Resizer.el;
  41. rs=el.resizer;
  42. mx=e.clientX;
  43. my=e.clientY;
  44. neww=(el.clientWidth-(rs.lastx-mx));
  45. newh=(el.clientHeight-(rs.lasty-my));
  46. if(neww>=el.minw){
  47. el.style.width=neww+'px';
  48. rs.lastx=mx;
  49. }
  50. else{
  51. rs.lastx-=parseInt(el.style.width)-el.minw;
  52. el.style.width=el.minw+'px';
  53.  
  54. }
  55. if(newh>=el.minh){
  56. el.style.height=newh+'px';
  57. rs.lasty=my;
  58. }
  59. else{
  60. rs.lasty-=parseInt(el.style.height)-el.minh;
  61. el.style.height=el.minh+'px';
  62.  
  63. }
  64.  
  65. return false;
  66.  
  67.  
  68. },
  69. end: function(){
  70. document.onmouseup=null;
  71. document.onmousemove=null;
  72. }
  73. };
  74. window.onload=function(){
  75. Resizer.attach(document.getElementsByClassName('resize')[0]);
  76. }
  77.  
  78. <div class="resize"><
  79. div class="drag"></div>
  80. </div>
  81.  
  82. Resizer.attach(element);
Add Comment
Please, Sign In to add comment