js は Baidu ログインページを模倣してドラッグウィンドウ効果_JavaScript スキルを実現します-jsチュートリアル-php.cn

js は Baidu ログインページを模倣してドラッグウィンドウ効果_JavaScript スキルを実現します

WBOY

リリース： 2016-05-16 15:11:00

オリジナル

1542 人が閲覧しました

Web 開発では、マウスのドラッグ効果は非常に一般的です。たとえば、Baidu のログインページでは、ログインをクリックするとウィンドウが表示され、このウィンドウをドラッグできます。では、このようなドラッグ効果を実現するにはどうすればよいでしょうか。実際、実装は非常に簡単で、その原理を理解するのは簡単です。最初に行うことは、マウスの 3 つのイベント (マウスを押す、移動する、離す) に関係することです。要素のマウスはそれぞれ計算されます。

コードをコピー

/*******
   拖拽原理1：
   拖拽状态 = 0 
   鼠标在元素上按下的时候 {
      拖拽状态 = 1
      记录下鼠标的x和y坐标
      记录下元素的x和y坐标
   }
   鼠标在元素上移动的时候 {
      如果拖拽状态是0就什么也不做。
      如果拖拽状态是1， 那么
      元素y = 现在鼠标y - 原来鼠标y + 原来元素y
      元素x = 现在鼠标x - 原来鼠标x + 原来元素x
   }
   鼠标在任何时候放开的时候 {
      拖拽状态 = 0
   }
   将以上思路翻译成JS代码就可以实现拖拽的效果了。
*******/
上面这个原理也可以演变为：
/*******
   拖拽原理2：
   拖拽状态 = 0 
   鼠标在元素上按下的时候 {
      拖拽状态 = 1
      记录下鼠标的x和y坐标
      记录下元素的x和y坐标
      元素的偏移值X=元素的X-元素的offsetLeft
      元素的偏移值Y=元素的Y-元素的offsetTop
   }
   鼠标在元素上移动的时候 {
      如果拖拽状态是0就什么也不做。
      如果拖拽状态是1， 那么
      元素y = 现在鼠标y -元素的偏移值X
      元素x = 现在鼠标x -元素的偏移值Y
   }
   鼠标在任何时候放开的时候 {
      拖拽状态 = 0
   }
   将以上思路翻译成JS代码就可以实现拖拽的效果了。
*******/

ログイン後にコピー

上記の 2 つの考え方は実際には同じです。移動イベントでは、要素がドラッグされたときにブラウザの外にドラッグされないように、要素の端の位置も処理する必要があることに注意してください。コードで直接:
コード 1:

<!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>

ログイン後にコピー

コード 2:

<!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>

ログイン後にコピー

コード 1 は原則 1 に対応し、コード 2 は原則 2 に対応し、効果は同じですが、原則 2 は原則 1 に基づいて進化します。進化後、要素のドラッグのエッジ処理もそれに応じて変更されます。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。