div拖動範圍限定在指定元素內

admin發表於2019-01-29

拖動效果大家可能比較熟悉，通常會對拖動範圍進行一下限定。

下面通程式碼例項介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
#box{
  width:400px;
  height:300px;
  background-color:red;
  margin:0px auto;
  position:relative;
}
#drag{
  width:50px;
  height:50px;
  background:green;
  position:absolute;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var odrag=document.getElementById("drag");
  var flag=false;
  var x,y;
  var ol,ot;
  odrag.onmousedown=function(ev){
    var ev=window.event||ev;
    flag=true;
    x=ev.clientX;
    y=ev.clientY;
    ol=odrag.offsetLeft;
    ot=odrag.offsetTop;
  }
  document.onmousemove=function(ev){
    if(flag==false) return;
    var ev=window.event||ev;
    var _x,_y;
    _x=ev.clientX-x+ol;
    _y=ev.clientY-y+ot;
    if(_x<0) _x=0;
    if(_y<0) _y=0;
    if(_x>obox.offsetWidth-odrag.offsetWidth) _x=obox.offsetWidth-odrag.offsetWidth;
    if(_y>obox.offsetHeight-odrag.offsetHeight) _y=obox.offsetHeight-odrag.offsetHeight;
         
     odrag.style.left=_x+"px";
     odrag.style.top=_y+"px";
  }
  document.onmouseup=function(){flag=false;}
}
</script> 
</head> 
<body> 
<div id="box">
  <div id="drag"></div>
</div>
</body> 
</html>

可以將指定的綠色的div的拖動範圍限定在紅色div之內，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.window.onload=function(){}，文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var obox=document.getElementById("box")，獲取id屬性值為box元素物件。

（3）.var odrag=document.getElementById("drag")，獲取id屬性會為drag的元素物件。

（4）.var flag=false，宣告一個變數flag並賦初值為false，它用來標識是否可以拖動，為false不可拖動，為true可以拖動。

（5）.var x,y，宣告兩個變數，用來儲存滑鼠按下時滑鼠指標在瀏覽器客戶區的座標。

（6）.var ol,ot，宣告兩個變數，用來儲存綠色div距離紅色div距離。

（7）.odrag.onmousedown=function(ev){}，為綠色div註冊onmousedown事件處理函式，ev是事件物件。

（8）.var ev=window.event||ev，事件物件的相容性處理。

（9）.flag=true，設定為true，也就是說當滑鼠在綠色div中按下時候才可以進行拖動。

（10）.x=ev.clientX，獲取滑鼠按下時，滑鼠指標距離瀏覽器客戶區左端的距離。

（11）.y=ev.clientY,獲取滑鼠按下時，滑鼠指標距離瀏覽器客戶區頂端的距離。

（12）.ol=odrag.offsetLeft，獲取滑鼠按下時，綠色div的左邊緣距離紅色div左側的距離。

（13）.ot=odrag.offsetTop，獲取滑鼠按下時，綠色div的上邊緣距離紅色div上側的距離。

（14）.document.onmousemove=function(ev){}，為document註冊onmousemove事件處理函式，很多朋友可能因為為什麼要將其註冊在document上而不是odrag，這是為了防止當滑鼠拖動過程中，滑鼠指標移出odrag導致拖動無效現象。

（15）.if(flag==false) return，如果flag值為false，這直接跳出。

（16）.var ev=window.event||ev，事件物件的相容性處理。

（17）.var _x,_y,宣告兩個區域性變數，用來儲存綠色div的left和top屬性值。

（18）._x=ev.clientX-x+ol，獲取拖動過程中，left屬性值，一個數學問題。

（19）._y=ev.clientY-y+ot，獲取拖動過程中，top屬性值，一個數學問題。

（20）.if(_x<0) _x=0，防止超出左邊緣。

（21）.if(_y<0) _y=0，防止超出上邊緣。

（22）.if(_x>obox.offsetWidth-odrag.offsetWidth) _x=obox.offsetWidth-odrag.offsetWidth，防止超出右邊緣。

（23）.if(_y>obox.offsetHeight-odrag.offsetHeight) _y=obox.offsetHeight-odrag.offsetHeight，防止超出下邊緣。

（24）.odrag.style.left=_x+"px"，odrag.style.top=_y+"px"設定綠色div的left和top值。

（25）.document.onmouseup=function(){flag=false;}，當滑鼠鬆開時，將flag設定為false。

二.相關閱讀：

（1）.onmousedown事件參閱JavaScript mousedown 事件一章節。 

（2）.var ev=window.event||ev參閱var ev=window.event||ev的作用是什麼一章節。 

（3）.clientX參閱JavaScript clientX一章節。 

（4）.offsetLeft參閱JavaScript offsetLeft一章節。

（5）.事件冒泡參閱JavaScript 事件冒泡一章節。 

（6）.onmousemove事件參閱JavaScript mousemove 事件一章節。 

（7）.onmouseup事件參閱JavaScript mouseup 事件一章節。

相關文章