如何只使用jQuery垂直调整DIV大小 – 没有插件？

编辑：我把这段代码放在jsbin： http ：//jsbin.com/eneru

---

我试图让用户使用jQuery调整（仅垂直）DIV元素。 我读了关于jQuery UI，我试过了，几分钟后，我就开始工作了。 但是这个库增加了~25KB的开销，我想避免，因为我只想要简单的垂直大小调整。

所以我试着自己做。 这是HTML，我使用内联样式清晰：

 
Lorem ipsum blah blah
   

如您所见，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做一些严肃的事情（咳咳），所以我可能会做一些愚蠢的事情。 如果是这样，请告诉我:)

Answer 1

你正在做一些愚蠢的事：你正试图自己做。

听我说，听我说：跨浏览器的Javascript是一个可怕的，可怕的事情。 许多版本中有许多引擎都有许多不同的操作系统，所有这些引擎都有许多细微之处，所有这些都使得Javascript几乎可以使用。 有一个很好的理由可以解释为什么像jQuery（及其扩展版）这样的librabries已经大受欢迎：许多优秀的程序员花费了大量的时间来抽象出所有这些可怕的不一致性，所以我们不必担心它。

现在，我不确定您的用户群，也许您正在迎合仍然有拨号的老家庭主妇。 但是在这个时代的大部分时间内，最初的页面加载时间为25KB（因为它将在之后缓存），因为它可以在所有浏览器中始终如一地工作，这是一个很小的代价。 在Javascript方面没有“简单”resize的function，所以最好使用UI。

Answer 2

我做了类似的事情并设法让它以最大和最小高度工作，对我来说似乎工作非常流畅，这是我的代码。

  $(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

Answer 3

我同意Paolo关于使用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 4

通过仅在实际拖动时绑定mousemove函数，可以保存在未resize时调用无操作处理程序：

 $(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的样本）