js面向对象方式实现拖拽效果

本文实例为大家分享了js面向对象方式实现拖拽的具体代码，供大家参考，具体内容如下

拖拽功能的实现原理：（直接拿走！）

!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>
    #box {
          position: absolute;
          left: 100px;
          top: 100px;
          width: 100px;
          height: 100px;
          background: red;
    }
    #box2 {
          position: absolute;
          left: 200px;
          top: 200px;
          width: 100px;
          height: 100px;
          background: green;
    }
      /style>
    /head>
    body>
      div id="box">
    文字/div>
      div id="box2">
    文字/div>
    /body>
    script>
  class Drag {
    startMouse = {
}
    ;
    startEl = {
}
    ;
        #el = null;
    constructor(el, option) {
          this.#el = el;
          this.option = option;
          this.start();
    }
    start() {
          let move = (e) =>
 {
        this.move(e)      }
          this.#el.addEventListener('mousedown', (e) =>
 {
        this.startMouse = {
          x: e.clientX,          y: e.clientY,        }
            this.ondragstart &
    &
     this.ondragstart(e)        this.startEl = this.getOffset();
            document.addEventListener('mouSEMove', move);
            document.addEventListener('mouseup', (e) =>
 {
              document.removeEventListener('mousemove', move);
              this.end(e);
        }
, {
          once: true        }
    )        e.preventDefault();
      }
)    }
    move(e) {
      let nowMouse = {
        x: e.clientX,        y: e.clientY,      }
      let disMouse = {
        x: nowMouse.x - this.startMouse.x,        y: nowMouse.y - this.startMouse.y      }
          this.ondrag &
    &
 this.ondrag(e)      this.setOffset(disMouse)    }
    end(e) {
          this.ondragend &
    &
 this.ondragend(e)    }
    getOffset() {
      return {
        x: parseFloat(getComputedStyle(this.#el)["left"]),        y: parseFloat(getComputedStyle(this.#el)["top"])      }
    }
    setOffset(dis) {
      this.#el.style.left = this.startEl.x + dis.x + 'px'      this.#el.style.top = this.startEl.y + dis.y + 'px'    }
  }
      let box = document.querySelector("#box");
      let box2 = document.querySelector("#box2");
      let d = new Drag(box);
      let d2 = new Drag(box2);
      let clonex = null;
      d2.ondragstart = (e) =>
 {
        clonex = box2.cloneNode(true);
    document.body.appendChild(clonex)    box2.style.opacity = 0.5  }
      d2.ondragend = () =>
 {
        document.body.removeChild(clonex);
    box2.style.opacity = 1  }
    /script>
    /html>
    

最终效果（拖动的为绿色块）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• javascript的面向对象编程一起来看看
• 详解JavaScript面向对象实战之封装拖拽对象
• JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
• JavaScript面向对象核心知识与概念归纳整理
• JavaScript面向对象之七大基本原则实例详解
• JavaScript的面向对象你了解吗

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！