在web開發(fā)中，鼠標(biāo)拖拽效果非常常見，例如百度的登錄頁，點擊登錄會彈出一個窗口，并且這個窗口可以拖動；那么這樣的拖拽效果如何實現(xiàn)呢？其實實現(xiàn)很簡章，搞清楚他的原理就很容易了；首當(dāng)其沖的，要涉及到鼠標(biāo)的三個事件，分別為鼠標(biāo)按下、移動、松開；在這三個事件里分別計算元素鼠標(biāo)的位置即可；

復(fù)制代碼

/*******
   拖拽原理1：
   拖拽狀態(tài) = 0 
   鼠標(biāo)在元素上按下的時候 {
      拖拽狀態(tài) = 1
      記錄下鼠標(biāo)的x和y坐標(biāo)
      記錄下元素的x和y坐標(biāo)
   }
   鼠標(biāo)在元素上移動的時候 {
      如果拖拽狀態(tài)是0就什么也不做。
      如果拖拽狀態(tài)是1， 那么
      元素y = 現(xiàn)在鼠標(biāo)y - 原來鼠標(biāo)y + 原來元素y
      元素x = 現(xiàn)在鼠標(biāo)x - 原來鼠標(biāo)x + 原來元素x
   }
   鼠標(biāo)在任何時候放開的時候 {
      拖拽狀態(tài) = 0
   }
   將以上思路翻譯成JS代碼就可以實現(xiàn)拖拽的效果了。
*******/
上面這個原理也可以演變?yōu)椋?
/*******
   拖拽原理2：
   拖拽狀態(tài) = 0 
   鼠標(biāo)在元素上按下的時候 {
      拖拽狀態(tài) = 1
      記錄下鼠標(biāo)的x和y坐標(biāo)
      記錄下元素的x和y坐標(biāo)
      元素的偏移值X=元素的X-元素的offsetLeft
      元素的偏移值Y=元素的Y-元素的offsetTop
   }
   鼠標(biāo)在元素上移動的時候 {
      如果拖拽狀態(tài)是0就什么也不做。
      如果拖拽狀態(tài)是1， 那么
      元素y = 現(xiàn)在鼠標(biāo)y -元素的偏移值X
      元素x = 現(xiàn)在鼠標(biāo)x -元素的偏移值Y
   }
   鼠標(biāo)在任何時候放開的時候 {
      拖拽狀態(tài) = 0
   }
   將以上思路翻譯成JS代碼就可以實現(xiàn)拖拽的效果了。
*******/

上面兩種思路其實是異曲同工，需要注意的是在移動事件里，還要處理元素邊緣的位置，以防止元素被拖動的時候拖到瀏覽器以外的地方；直接來看代碼：
代碼一：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JS拖拽</title>
  <style>
  *{padding: 0; margin: 0; }
  .box{width: 100px;height: 100px;background: blue;position: absolute; }
  </style>
  <script>
    var isDown = false;
    var ObjLeft, ObjTop, posX, posY, obj;
    window.onload = function() {
      obj = document.getElementById('box');
      obj.onmousedown = down;
      document.onmousemove = move;
      document.onmouseup = up;
    }

    function down(event) {
      obj.style.cursor = "move";
      isDown = true;
      ObjLeft = obj.offsetLeft;
      ObjTop = obj.offsetTop;
      posX = parseInt(mousePosition(event).x);
      posY = parseInt(mousePosition(event).y);
    }

    function move(event) {
      if (isDown == true) {
        var x = parseInt(mousePosition(event).x - posX + ObjLeft);
        var y = parseInt(mousePosition(event).y - posY + ObjTop);
        var w = document.documentElement.clientWidth - obj.offsetWidth;
        var h = document.documentElement.clientHeight - obj.offsetHeight;
        console.log(x + ',' + y);
        if (x < 0) {
          x = 0
        } else if (x > w) {
          x = w
        };
        if (y < 0) {
          y = 0
        }else if (y > h) {
          y= h
        };

        obj.style.left = x + 'px';
        obj.style.top = y + 'px';
      }
    }

    function up() {
      isDown = false;
    }
    
    function mousePosition(evt) {
      var xPos, yPos;
      evt = evt || window.event;
      if (evt.pageX) {
        xPos = evt.pageX;
        yPos = evt.pageY;
      } else {
        xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
        yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
      }
      return {
        x: xPos,
        y: yPos
      }
    }
  </script>
</head>
<body>
  <div id="box" class="box"></div>
</body>
</html>

代碼二：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JS拖拽</title>
  <style>
  *{padding: 0; margin: 0; }
  .box{width: 100px;height: 100px;background: blue;position: absolute; }
  </style>
  <script>
    var isDown = false;
    var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY;
    window.onload = function() {
      obj = document.getElementById('box');
      obj.onmousedown = down;
      document.onmousemove = move;
      document.onmouseup = up;
    }

    function down(event) {
      obj.style.cursor = "move";
      isDown = true;
      ObjLeft = obj.offsetLeft;
      ObjTop = obj.offsetTop;
      posX = parseInt(mousePosition(event).x);
      posY = parseInt(mousePosition(event).y);
      offsetX=posX-ObjLeft;
      offsetY=posY-ObjTop;
    }

    function move(event) {
      if (isDown == true) {
        var x=mousePosition(event).x-offsetX
        var y=mousePosition(event).y-offsetY
        var w = document.documentElement.clientWidth - obj.offsetWidth;
        var h = document.documentElement.clientHeight - obj.offsetHeight;
        console.log(x + ',' + y);
        x=Math.min(w,Math.max(0,x));
        y=Math.min(h,Math.max(0,y));
        obj.style.left = x + 'px';
        obj.style.top = y + 'px';
      }
    }

    function up() {
      isDown = false;
    }
    
    function mousePosition(evt) {
      var xPos, yPos;
      evt = evt || window.event;
      if (evt.pageX) {
        xPos = evt.pageX;
        yPos = evt.pageY;
      } else {
        xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
        yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
      }
      return {
        x: xPos,
        y: yPos
      }
    }
  </script>
</head>
<body>
  <div id="box" class="box"></div>
</body>
</html>

代碼一對應(yīng)原理一，代碼二對應(yīng)原理二，效果都是一樣的，只不過原理二是在原理一的基礎(chǔ)上演變過來的，演變之后，元素拖動的邊緣處理也相應(yīng)的做了變化。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: