JavaScript 限定範圍的拖拽效果

admin發表於2019-01-18

有時拖拽要限定在某一個指定的元素之內。

下面就通過程式碼例項介紹一下如何實現此效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<title>拖拽效果限制範圍-螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
body{
  padding:50px;
}
#box{
  width:350px;
  height:250px;
  background:red;
  overflow:hidden;
  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 isDrag=false;
  var x,y;
   
  odrag.onmousedown=down;
  document.onmousemove=move;
  document.onmouseup=up;
   
  function down(ev){
    var ev=window.event||ev;
    x=ev.clientX-this.offsetLeft;
    y=ev.clientY-this.offsetTop;
    this.style.cursor="move"; 
    isDrag=true;
  }
  function move(ev){
    if(isDrag){
      var ev=window.event||ev;
      odrag.style.left=(ev.clientX-x)+"px";
      odrag.style.top=(ev.clientY-x)+"px";
      if(parseInt(odrag.style.left)<0){
        odrag.style.left=0;
      }
      if(parseInt(odrag.style.top)<0){
        odrag.style.top=0;
      }
      if(parseInt(odrag.style.left)>obox.clientWidth-odrag.clientWidth){
        odrag.style.left=(obox.clientWidth-odrag.clientWidth)+"px";
      }
      if(parseInt(odrag.style.top)>obox.clientHeight-odrag.clientHeight){
         odrag.style.top=(obox.clientHeight-odrag.clientHeight)+"px";
      }
    }
  }
  function up(){
    isDrag=false;
    odrag.style.cursor="pointer";
  }
}
</script>
</head>
<body>
<div id="box">
  <div id="drag"></div>
</div>
</body>
</html>

程式碼實現了拖拽效果，並且將拖拽返回限定在紅色的div之內，下面就介紹一下實現過程。

一.實現原理:

原理非常的簡單，綠色div為絕對定位，它父元素的定位方式是相對定位，那麼綠色div的定位參考物件就是紅色的div。當進行拖動的時候就會判斷元素的left和top屬性值是否超出了紅色父元素的邊界，如果超出，就將它的top和left屬性值設定為邊界臨界狀態，這樣就實現了將綠色div限定於紅色div之內。

二.程式碼註釋:

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

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

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

（4）.var isDrag=false，此變數用於標識div是否可以被拖動。

（5）.var x,y，用於存放滑鼠指標距離要拖動div的左邊緣和上邊緣的距離。

（6）.odrag.onmousedown=down，為綠色div註冊onmousedown事件處理函式。

（7）.document.onmousemove=move，為document物件註冊onmousemove事件處理函式，之所以沒有直接給odrag註冊，是因為利用事件冒泡可以防止滑鼠滑出div導致拖動失效現象。

（8）.document.onmouseup=up，為document物件註冊onmouseup事件處理函式，同樣利用了事件冒泡。

（9）.function down(ev){},onmousedown事件處理函式，ev為事件物件。

（10）.var ev=window.event||ev，為了相容各主要瀏覽器。

（11）.x=ev.clientX-this.offsetLeft，獲取滑鼠指標距離div左邊緣的距離。