一个简单的拖动例子

Question

一个简单的拖动例子

Opened this issue 5 years ago · 0 comments

把下面的内容保存为一个名为 drag.html 的文件，然后用谷歌浏览器打开看效果。

<!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>一个简单的拖动例子</title>
    <style>
      body,
      html {
        min-height: 100vh;
        font-size: 12px;
      }

      .box {
        position: absolute;
        left: 50px;
        top: 100px;
        border: 1px solid #a0b3d6;
        width: 300px;
        box-shadow: 2px 2px 4px #666666;
      }
      .box > .bar {
        background-color: #beceeb;
        height: 28px;
        line-height: 25px;
        cursor: move;
        padding-left: 5px;
      }
      .box > .content {
        height: 150px;
        background-color: white;
        padding-left: 5px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="bar">按下拖动，试试</div>
      <div class="content">一个简单的拖动例子</div>
    </div>

    <script>
      // 允许拖动的对象
      var barNode = document.querySelector('.box>.bar')
      // 外框
      var boxNode = document.querySelector('.box')

      // 缓存一些信息
      var params = {
        currentX: 0,
        currentY: 0,
        left: 0,
        top: 0
      }

      //获取相关CSS属性
      var getCss = function(o, key) {
        return o.currentStyle
          ? o.currentStyle[key]
          : document.defaultView.getComputedStyle(o, false)[key]
      }

      // 鼠标按下时加入事件监听
      barNode.addEventListener('mousedown', event => {
        // 目标对象的相对位置
        params.left = parseInt(getCss(boxNode, 'left'))
        params.top = parseInt(getCss(boxNode, 'top'))

        // 鼠标按下时的位置
        params.currentX = event.clientX
        params.currentY = event.clientY

        // 拖拽监听
        document.addEventListener('mousemove', OnDragStart)
        // 回收机制
        document.addEventListener('mouseup', OnDragStop)
      })

      // 解除拖拽绑定
      function OnDragStop() {
        document.removeEventListener('mousemove', OnDragStart)
        document.removeEventListener('mouseup', OnDragStop)
      }

      // 开始移动
      function OnDragStart(event) {
        boxNode.style.left =
          parseInt(event.clientX - params.currentX + params.left) + 'px'
        boxNode.style.top =
          parseInt(event.clientY - params.currentY + params.top) + 'px'
      }
    </script>
  </body>
</html>