JavaScript拖動調整元素的尺寸

admin發表於2018-11-30
JavaScript

一些實際應用中，可以通過拖拽調整視窗的大小。

下面通過分析一個例項來簡單介紹一下如何實現此功能，程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style type="text/css">
ul,li {
  margin:0;
  padding:0;
}
body {
  font:14px/1.5 Arial;
  color:#666;
}
#box {
  position:relative;
  width:600px;
  height:400px;
  border:2px solid #000;
  margin:10px auto;
  overflow:hidden;
}
#box ul {
  list-style-position:inside;
  margin:10px;
}
#box div{
  position:absolute;
  width:100%;
}
#top, #bottom {
  color:#FFF;
  height:100%;
  overflow:hidden;
}
#top {
  background:green;
}
#bottom {
  background:skyblue;
  top:50%
}
#line {
  top:50%;
  height:4px;
  overflow:hidden;
  margin-top:-2px;
  background:red;
  cursor:n-resize;
}
</style>
<script type="text/javascript">  
function $(id){  
  return document.getElementById(id)  
}  
window.onload=function(){  
  var oBox=$("box"),oBottom=$("bottom"),oLine=$("line");  
  oLine.onmousedown=function(e){  
  var disY=(e||event).clientY;  
  oLine.top=oLine.offsetTop;  
  oBox.onmousemove=function(e){  
   var iT=oLine.top+((e||event).clientY-disY);  
   var maxT=oBox.clientHeight-oLine.offsetHeight;  
   oLine.style.margin = 0;  
   iT < 0 && (iT = 0);  
   iT > maxT && (iT = maxT);  
   oLine.style.top=oBottom.style.top=iT+"px";  
   return false  
  }  
  oBox.onmouseup=function(){  
   oBox.onmousemove=null;  
   oBox.onmouseup=null;  
  } 
  return false  
} 
} 
</script>
<center>
  上下拖動紅條改變顯示區域高度
</center>
<div id="box">
  <div id="top">
    <ul>
      <li>jQuery初學例項程式碼集</li>
      <li>100多個ExtJS應用初學例項集</li>
      <li>基於jQuery的省、市、縣三級級聯選單</li>
      <li>一個類似QQ網的JS相簿展示特效</li>
      <li>eWebEditor v4.60 最新通用精簡版</li>
      <li>FCKeditor 2.6.4.1 網頁編輯器</li>
      <li>jQuery平滑圖片滾動</li>
      <li>Xml+JS省市縣三級聯動選單</li>
      <li>jQuery 滑鼠滑過連結文字彈出層提示的效果</li>
      <li>JS可控制的圖片左右滾動特效（走馬燈） </li>
    </ul>
  </div>
  <div id="bottom">
    <ul>
      <li>網頁上部大Banner廣告特效及圖片橫向滾動程式碼</li>
      <li>FlexSlider網頁廣告、圖片焦點圖切換外掛</li>
      <li>相容IE，火狐的JavaScript圖片切換</li>
      <li>jQuery仿ios無線區域網WIFI提示效果（摺疊皮膚）</li>
      <li>TopUp js圖片展示及彈出層特效程式碼</li>
      <li>jQuery仿Apple蘋果手機放大鏡閱讀效果</li>
      <li>Colortip 文字title多樣式提示外掛</li>
      <li>網頁換膚，Ajax網頁風格切換程式碼集</li>
      <li>超強大、漂亮的藍色網頁彈出層效果</li>
      <li>jQuery 影像預覽功能的程式碼實現 </li>
    </ul>
  </div>
  <div id="line"></div>
</div>
</body>
</html>

一.實現原理:

當滑鼠按在oLine物件時，會觸發mousedown事件，這時就會執行對應事件處理函式，此處理函式，首先會將當前oLine.offsetTop（oLine物件距離父物件頂部的距離）值賦給oLine.top，以便後面程式碼使用。當上下拖動滑鼠的時候，會觸發mousemove事件，這裡要特別注意，一般的思路會將mousemove事件註冊到oLine物件，這裡卻註冊到oBox，目的是通過事件冒泡原理，將oLine物件上觸發的事件傳播到oBox，這樣可以防止滑鼠拖動oLine物件的時候，指標超出oLine物件邊界，導致失效的情況。當滑鼠移動的時候，通過iT=oLine.top+((e||event).clientY-disY)不斷計算oLine物件的offsetTop值，然後通過maxT=oBox.clientHeight-oLine.offsetHeight計算出offsetTop最大值，也就是oLine被拖動到最低端的位置，同時通過語句判斷，將拖動範圍控制在oBox物件範圍之內，最後通過oLine.style.top=oBottom.style.top=iT+"px"將不斷計算出來的offsetTop值賦值給oLine.style.top和oBottom.style.top，於是就實現了拖動效果。

二.程式碼註釋:

（1）.function $(id){}用來返回具有相應id值的物件。

（2）.window.onload=function(){ }當王爺內容載入完畢再去執行主體程式碼。

（3）.var oBox=$("box")，var oBottom=$("bottom")和var oLine=$("line")用於獲取相應的物件。

（4）.oLine.onmousedown=function(e){}為oLine物件繫結onmousedown事件處理函式。

（5）.var disY=(e||event).clientY用來獲取onmousedown事件被觸發時滑鼠指標相對於瀏覽器頁面的垂直座標，並且在這裡使用了相容性寫法。

（6）.oLine.top=oLine.offsetTop可以將onmousedown事件出發時oLine物件的offsetTop值賦值給oLine物件的自定義屬性top。

（7）.oBox.onmousemove=function(e){ }為oBox物件的onmousemove事件繫結事件處理函式。

（8）.var iT=oLine.top+((e||event).clientY-disY)可以不斷計算出滑鼠拖動時oLine物件的offsetTop屬性值。

（9）.var maxT=oBox.clientHeight-oLine.offsetHeight用以計出oLine物件的最大offsetTop值，這個時候oLine被拖動到最低端。

（10）.oLine.style.margin=0將oLine物件的外邊距設定為零。

（11）.iT<0&&()這個可以認為是if語句的縮寫： 

[JavaScript] 純文字檢視 複製程式碼
if(iT<0){
  iT=0
}

（12）.iT>maxT&&(iT=maxT)和上面類似。

（13）.oLine.style.top=oBottom.style.top=iT+"px"用來將之前獲得的oLine兌現的offsetTop屬性值設定設為oLine物件和oBottom物件的top屬性值，當然後面一定要附加"px"。

（14）.return false可以避免一些預設事件的發生，影響效果。

（15）.oBox.onmouseup=function(){ }為oBox繫結onmouseup事件處理函式，當滑鼠按鍵放下時清除oBox物件的onmousemove事件和onmouseup事件。

（16）.rreturn false可以避免一些預設事件的發生，影響效果。

相關文章