JavaScript實現登陸窗口的拖拽

時間 2019-12-07
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {margin: 0; padding: 0; }
    body, textarea, select, input, button {font-size: 12px; color: #fff; font-family: Arial, Helvetica, sans-serif; -webkit-text-size-adjust: none;}

    .fl-l{float: left;}
    .fl-r{float: right;}

    #dialog{
      position: absolute;
      top: 200px;
      left: 400px;
      width: 400px;
      height: 200px;
      background-color: #eaf6db;
      border: 1px solid lightslategray;
    }
    .dialog-title{
      height: 40px;
      line-height: 40px;
      background-color: #3a3333;
      cursor: move;
    }
    .login, .close{
      display: inline-block;
      margin: 0 15px;
    }

  </style>
</head>
<body>
  <div id="dialog">
    <div id="dialog-title" class="dialog-title">
      <span class="fl-l login">登陸</span>
      <span class="fl-r close">X</span>
    </div>
  </div>

  <script>
    // 獲取DOM元素
    var dialogTitle = document.getElementById('dialog-title')
    var dialog = document.getElementById('dialog')

    // 初始化鼠標默認位置
    var disX = 0, disY = 0

    // 添加鼠標按下事件
    dialogTitle.onmousedown = function(e) {
      var e = e || event

      // 計算鼠標距離彈出框內的位置
      disX = e.clientX - dialog.offsetLeft          // 鼠標相對於瀏覽器窗口左上角的橫向距離 - 彈出框距離頁面左上角的橫向偏移距離
      disY = e.clientY - dialog.offsetTop           // 鼠標相對於瀏覽器窗口左上角的縱向距離 - 彈出框距離頁面左上角的縱向偏移距離

      // 點擊彈出框後拖動鼠標，移動彈出框
      document.onmousemove = function(e) {
        var e = e || event
        
        // 彈出框dialog距離窗口左上角的水平和縱向距離
        var currentDialogDisX = e.clientX - disX
        var currentDialogDisY = e.clientY - disY

        if(currentDialogDisX < 0) { // 彈出框緊貼窗口左邊的狀況
          currentDialogDisX = 0
        } else if(currentDialogDisX > document.documentElement.clientWidth - dialog.offsetWidth) { // 彈出框緊貼窗口右邊的狀況
          currentDialogDisX = document.documentElement.clientWidth - dialog.offsetWidth
        }

        if(currentDialogDisY < 0) { // 彈出框緊貼窗口上邊的狀況
          currentDialogDisY = 0
        } else if(currentDialogDisY > document.documentElement.clientHeight - dialog.offsetHeight) { // 彈出框緊貼窗口下邊的狀況
          currentDialogDisY = document.documentElement.clientHeight - dialog.offsetHeight
        }
        
        // 當鼠標移動時改變彈出框的位置
        dialog.style.left = currentDialogDisX + 'px'
        dialog.style.top = currentDialogDisY + 'px'

      }
      
      // 當點擊鼠標拖動彈出框，擡起鼠標時
      document.onmouseup = function() {
        // 清除彈出框的移動事件及自己
        document.onmousemove = null
        document.onmouseup = null
      }

      // 阻止默認事件，若是不加這個阻止默認事件，在 firefox 下會有一個獲取焦點的光標一直在閃動，在3.0及如下會出現拖動出現重影的狀況
      return false
    }
  </script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。