淺析JavaScript動畫模擬拖拽原理

更新時(shí)間：2016年12月09日 09:00:10 作者：老板丶魚丸粗面

本文主要對JavaScript動畫模擬拖拽原理進(jìn)行分析，步驟清晰，簡短的文字，深入的理解。需要的朋友可以看下

模擬拖拽的原理：

x1等于div.offsetLeft

y1等于div.offsetTop

x2等于ev.clientX(ev表示event事件)

y2等于ev.clientY

當(dāng)我們在方塊上按下鼠標(biāo)的時(shí)候，x2-x1即可確定。移動鼠標(biāo)之后，我們用鼠標(biāo)當(dāng)前的位置即x4、y4減去x2-x1、y2-y1就可以得到方塊現(xiàn)在的位置。

代碼：

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   #box{
    width: 100px;
    height: 100px;
    background: red;
   position: absolute;
   }
  </style>
 </head>
 <body>  
  <div id="box"></div>
  <script type="text/javascript">
  var oBox = document.getElementById('box');
  oBox.onmousedown = function(ev){
  // 鼠標(biāo)按下 
  var ev = ev || event; 
  // 獲取鼠標(biāo)離div得距離
  var mouseBoxleft = ev.clientX - this.offsetLeft;
  var mouseBoxTop = ev.clientY - this.offsetTop; 
  oBox.onmousemove = function(ev){
   // 鼠標(biāo)按下左鍵并移動 
  var ev = ev || event; 
   // 設(shè)置div移動時(shí)，它的位置
   oBox.style.left = ev.clientX - mouseBoxleft + 'px';
   oBox.style.top = ev.clientY - mouseBoxleft + 'px';
   }
   oBox.onmouseup = function(){
   // 鼠標(biāo)左鍵抬起 
   oBox.onmousemove = oBox.onmouseup = null;
   }
  }
  </script>
 </body>
 </html>

優(yōu)化代碼：

【1】鼠標(biāo)移動快的時(shí)候，鼠標(biāo)會移出方塊，這時(shí)方塊就不會再跟隨鼠標(biāo)動了。

解決辦法：就是將onmousemove和onmouseup加到document對象上

代碼：

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
 <title>Document</title>
  <style>
   #box{
   width: 100px;
    height: 100px;
   background: red;
    position: absolute;
   }
  </style>
 </head>
 <body>  
  <div id="box"></div>
  <script>
 var oBox = document.getElementById('box'); 
 oBox.onmousedown = function(ev){
  // 鼠標(biāo)按下 
  var ev = ev || event; 
  // 獲取鼠標(biāo)離div得距離
  var mouseBoxleft = ev.clientX - this.offsetLeft;
  var mouseBoxTop = ev.clientY - this.offsetTop; 
  document.onmousemove = function(ev){
  // 鼠標(biāo)按下左鍵并移動  
   var ev = ev || event; 
   // 設(shè)置div移動時(shí)，它的位置
   oBox.style.left = ev.clientX - mouseBoxleft + 'px';
   oBox.style.top = ev.clientY - mouseBoxleft + 'px'; 
   } 
   document.onmouseup = function(){
   // 鼠標(biāo)左鍵抬起  
   document.onmousemove = document.onmouseup = null;
   }
  }
  </script>
 </body>
 </html>

【2】當(dāng)要拖動的方塊中有文字時(shí)會觸發(fā)瀏覽器的默認(rèn)行為

　解決辦法：1、使用return false添加到onmousedown事件中阻止瀏覽器的默認(rèn)行為（IE除外）

　　　　　　 2、使用全局捕獲（IE）

1、使用return false添加到onmousedown事件中阻止瀏覽器的默認(rèn)行為（IE除外）

代碼：

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   #box{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
  }
 </style>
 </head>
 <body>  
  <div id="box">模擬拖拽</div>
  <script>
 var oBox = document.getElementById('box');
 oBox.onmousedown = function(ev){
   // 鼠標(biāo)按下
   var ev = ev || event;
   // 獲取鼠標(biāo)離div得距離
   var mouseBoxleft = ev.clientX - this.offsetLeft;
   var mouseBoxTop = ev.clientY - this.offsetTop;
   document.onmousemove = function(ev){
   // 鼠標(biāo)按下左鍵并移動 
    var ev = ev || event;
    // 設(shè)置div移動時(shí)，它的位置
    oBox.style.left = ev.clientX - mouseBoxleft + 'px';
    oBox.style.top = ev.clientY - mouseBoxleft + 'px';
   }
   document.onmouseup = function(){
  // 鼠標(biāo)左鍵抬起 
   document.onmousemove = document.onmouseup = null;
  }
   // 阻止默認(rèn)行為
   return false;
  }
  </script>
 </body>
 </html>

2、使用全局捕獲（IE）

　全局捕獲：當(dāng)我們給一個(gè)元素這只全局捕獲后，改元素會監(jiān)聽后續(xù)發(fā)生的所有事件，當(dāng)有事件發(fā)生的時(shí)候就會觸發(fā)改元素的事件

代碼：

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <input type="button" id="button1" value="彈出1" />
  <input type="button" id="button2" value="彈出2" />
  <script type="text/javascript">
  window.onload = function(){
  var Btn1 = document.getElementById('button1');
   var Btn2 = document.getElementById('button2'); 
   Btn1.setCapture(); 
   Btn1.onclick = function(){
    alert(1);
  }
   Btn2.onclick = function(){
   alert(2);
  }
 }
 </script>
 </body>
</html>

給Btn1設(shè)置了全局捕獲之后，即使我們點(diǎn)擊了Btn2還是會觸發(fā)Btn1的點(diǎn)擊事件

在模擬拖拽中，給要拖拽的方塊onmousedown添加全局捕獲然后再onmouseup中取消全局捕獲

代碼：

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  #box{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
  }
  </style>
</head>
 <body>  
  <div id="box">模擬拖拽</div>
  <script>
 var oBox = document.getElementById('box');
  oBox.onmousedown = function(ev){
  // 鼠標(biāo)按下 
   var ev = ev || event;
  // 獲取鼠標(biāo)離div得距離
   var mouseBoxleft = ev.clientX - this.offsetLeft;
   var mouseBoxTop = ev.clientY - this.offsetTop;
   // IE瀏覽器，全局捕獲
   if(oBox.setCapture){
   oBox.setCapture();
   }
   document.onmousemove = function(ev){
  // 鼠標(biāo)按下左鍵并移動 
    var ev = ev || event;
    // 設(shè)置div移動時(shí)，它的位置
    oBox.style.left = ev.clientX - mouseBoxleft + 'px';
    oBox.style.top = ev.clientY - mouseBoxleft + 'px';
   }
   document.onmouseup = function(){
   // 鼠標(biāo)左鍵抬起 
    document.onmousemove = document.onmouseup = null;
    //IE下，釋放全局捕獲 releaseCapture();
   if ( oBox.releaseCapture ) {
     oBox.releaseCapture();
    }
   }
   // 阻止默認(rèn)行為
   return false;
  }
  </script>
 </body>
 </html>

【3】封裝模擬拖拽函數(shù)

　代碼：

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   #box{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
   }
  </style>
 </head>
 <body>
  <div id="box">模擬拖拽</div>
  <script>
  var oBox = document.getElementById('box');
  drag(oBox);
  function drag(obj){
   obj.onmousedown = function(ev){
    // 鼠標(biāo)按下
   var ev = ev || event;
    // 獲取鼠標(biāo)離div得距離
    var mouseBoxleft = ev.clientX - this.offsetLeft;
    var mouseBoxTop = ev.clientY - this.offsetTop;
    // IE瀏覽器，全局捕獲
    if(obj.setCapture){
     obj.setCapture();
    }
    document.onmousemove = function(ev){
    // 鼠標(biāo)按下左鍵并移動 
     var ev = ev || event;
     // 設(shè)置div移動時(shí)，它的位置
     obj.style.left = ev.clientX - mouseBoxleft + 'px';
     obj.style.top = ev.clientY - mouseBoxleft + 'px';
    }
    document.onmouseup = function(){
    // 鼠標(biāo)左鍵抬起 
     document.onmousemove = document.onmouseup = null;
    //IE下，釋放全局捕獲 releaseCapture();
     if ( obj.releaseCapture ) {
      obj.releaseCapture();
    }
    }
    // 阻止默認(rèn)行為
    return false;
  }
 }
  </script>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: