用鼠標不斷調整元素大小的最佳方式是什麼？

Question

在元素的右下角點擊並按住調整大小圖像，不斷調整元素大小的最佳方法是什麼？是否有一個特定的空元素，內置調整大小或使用的樣式比在JavaScript中使用while循環更好？

Answer 1

一般的處理方法是這樣的東西：

• 當onmousedown事件在調整大小的目標大火，開始跟蹤的OnMouseMove
• 當的OnMouseMove火災，調整元件
• 當onmouseup火災，清除的OnMouseMove處理程序

所以基本上你只是迴應事件，沒有while循環或任何涉及。

完成它可能有點棘手，所以我會建議看看是否有JS庫可以使用。一個非常簡單的方式來獲得這種行爲是使用jQuery UI's resizable component

Answer 2

在這裏你去人：

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，但可調整大小的類需要「調整大小」，可拖動元素的類需要「拖動」。

Resizer.attach(element); 

...其中元素將被調整的一個：

與安裝它。

適用於多個元素，如jsfiddle所示。您還可以傳入最小高度和最小寬度。如果你不這樣做，它會自動使它們成爲可拖動元素高度的兩倍。

目前確實有一個問題，當你滾動一路下來。我不確定如何反擊它，但我會在更晚的時候處理它。