拖拽

鼠标拖拽元素 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拖拽</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body>
    <div
      id="box"
      style="
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
      "
    ></div>
    <script>
      class Drag {
        constructor(id) {
          this.disX = 0
          this.disY = 0
          this.box = document.getElementById(id)
          this.m = this.move.bind(this)
          this.u = this.up.bind(this)
        }
        init() {
          this.box.addEventListener('mousedown', this.down.bind(this))
        }
        down(ev) {
          this.disX = ev.pageX - this.box.offsetLeft
          this.disY = ev.pageY - this.box.offsetTop
          document.addEventListener('mousemove', this.m)
          document.addEventListener('mouseup', this.u)
        }
        move(ev) {
          this.box.style.left = ev.pageX - this.disX + 'px'
          this.box.style.top = ev.pageY - this.disY + 'px'
        }
        up() {
          document.removeEventListener('mousemove', this.m)
          document.removeEventListener('mouseup', this.u)
        }
      }
      let xxx = new Drag('box')
      xxx.init()
    </script>
  </body>
</html>

 

posted @ 2020-11-25 23:50  小生不才。  阅读(74)  评论(0)  编辑  收藏  举报