如何讓只用jQuery垂直調整DIV的大小 - 無插件？

Question

編輯：我把這個代碼片段中jsbin：http://jsbin.com/eneru

---

我試圖讓用戶調整大小（僅垂直）與jQuery DIV元素。我閱讀了jQuery UI，我嘗試了它，並在幾分鐘內讓它工作。但是這個庫增加了一個我想避免的〜25KB開銷，因爲我只想要簡單的垂直調整大小。

所以我試圖自己做。這是HTML，我使用內嵌樣式爲清楚：

<div id="frame" style="border: 1px solid green; height: 350px"> 
    <div style="height: 100%">Lorem ipsum blah blah</div> 
    <span id="frame-grip" style="display: block; width: 100%; height: 16px; background: gray"></span> 
</div> 

正如你可以看到，有一個DIV元素下一點吧，所以用戶可以拖動它向上或向下調整DIV。這是Javascript代碼（使用jQuery）：

$(document).ready(function(){ 
    var resizing = false; 
    var frame = $("#frame"); 
    var origHeightFrame = frame.height(); 
    var origPosYGrip = $("#frame-grip").offset().top; 
    var gripHeight = $("#frame-grip").height(); 


    $("#frame-grip").mouseup(function(e) { 
     resizing = false; 
    }); 

    $("#frame-grip").mousedown(function(e) { 
     resizing = true; 
    }); 

    $("#frame-grip").mousemove(function(e) { 
     if(resizing) { 
      frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2); 
     } 
    }); 
}); 

它的工作原理，或多或少，但如果你拖動滑塊速度太快，它停止跟隨鼠標移動和一切休息。

這是我第一次嘗試用JS和jQuery做嚴重（ahem），所以我可能會做些愚蠢的事情。如果是這樣，請告訴我:)

Answer 1

你是做一些愚蠢的事情：你試圖自己做。

聽我說，聽我說：跨瀏覽器的Javascript是一個可怕的，可怕的事情。有很多不同版本的引擎，有很多不同的操作系統，所有這些引擎都有很多細節，所有這些都使得Javascript幾乎可以與之合作。 jQuery（及其擴展）之類的圖書館已經大行其道，這有一個很好的理由：許多優秀的程序員花了很多時間抽出所有這些可怕的不一致之處，所以我們不必擔心。

現在，我不確定你的用戶羣，也許你正在迎合仍然有撥號的老主婦。但是，在這個時代的大部分時間，25KB的初始頁面負載（因爲它將被緩存），以便讓所有瀏覽器持續工作，這是一個小小的代價。 Javascript中沒有「簡單」調整大小的功能，所以最好使用UI。

Answer 2

我與保羅同意有關使用UI，但這裏有一些修改代碼，使其能工作：

$(document).ready(function(){ 
    var resizing = false; 
    var frame = $("#frame"); 

    $(document).mouseup(function(e) { 
     resizing = false; 
    }); 

    $("#frame-grip").mousedown(function(e) { 
     e.preventDefault(); 
     resizing = true; 
    }); 

    $(document).mousemove(function(e) { 
     if(resizing) { 
      var origHeightFrame = frame.height(); 
      var origPosYGrip = $("#frame-grip").offset().top; 
      var gripHeight = $("#frame-grip").height(); 
      frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2); 
     } 
    }); 
}); 

Answer 3

可以保存有，當你不調整稱爲一個什麼都不做處理程序，由只有綁定時你實際上拖動鼠標移動功能：

$(document).ready(function(){ 
    var resizing = function(e) { 
     var frame = $("#frame"); 
     var origHeightFrame = frame.height(); 
     var origPosYGrip = $("#frame-grip").offset().top; 
     var gripHeight = $("#frame-grip").height(); 
     frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2); 
     return false; 
    } 

    var stopResizing = function(e) { 
     $(document).unbind("mouseover", resizing); 
    } 

    $("#frame-grip").mouseup(stopResizing); 

    $("#frame-grip").mousedown(function(e) { 
     e.preventDefault(); 
     $(document).bind("mouseover", resizing).mouseup(stopResizing); 
    }); 

}); 

（在http://jsbin.com/ufuqo樣品）

Answer 4

我對類似的事情，工作，設法得到它的工件W ith最大和最小高度，對我來說似乎工作非常流暢，這是我的代碼。

$(document).ready(function() 
{ 
    var resizing = false; 
    var frame = $("#frame").height(); 

    $(document).mouseup(function(event) 
    { 
     resizing = false; 
     frame = $("#frame").height(); 
    }); 

    $("#frame-grip").mousedown(function(event) 
    { 
     resizing = event.pageY; 
    }); 

    $(document).mousemove(function(event) 
    { 
     if (resizing) 
     { 
      $("#frame").height(frame + resizing - event.pageY); 
     } 
    }); 
}); 

活的例子，我如何使用它，拉紅色的按鈕，缺乏圖像，所以我用簡單的顏色取代。http://jsbin.com/ufuqo/23