JS面向对象编程实现的拖拽功能案例详解

JS面向对象编程实现的拖拽功能案例，可以分为以下几个步骤：

1. 确定目标

首先要明确要实现的功能，即拖拽功能，定义需要拖拽的元素和拖拽的位置。

示例代码:

let box = document.querySelector('.box');   // 需要拖拽的元素
let mouseX = 0;       // 鼠标在x轴上的位置
let mouseY = 0;       // 鼠标在y轴上的位置
let elementX = 0;     // 元素在x轴上的位置
let elementY = 0;     // 元素在y轴上的位置

2. 创建封装方法（类）

为了实现拖拽功能，需要对该功能进行封装，以方便复用。我使用了类的形式编写封装的方法，将代码进行整合。

示例代码：

class Drag {

  constructor(element) {
    this.element = element 
    this.mouseX = 0;
    this.mouseY = 0;
    this.elementX = 0;
    this.elementY = 0;
  }

  onMouseDown(event) {   // 鼠标按下开始拖拽
    this.mouseX = event.clientX;
    this.mouseY = event.clientY;
    this.elementX = this.element.getBoundingClientRect().left;
    this.elementY = this.element.getBoundingClientRect().top;
    document.addEventListener('mousemove', this.onMouseMove);
    document.addEventListener('mouseup', this.onMouseUp);
  }

  onMouseMove(event) {   // 鼠标移动时拖拽
    let dX = event.clientX - this.mouseX;
    let dY = event.clientY - this.mouseY;
    this.element.style.left = this.elementX + dX + 'px';
    this.element.style.top = this.elementY + dY + 'px';
  }

  onMouseUp(event) {   // 鼠标抬起停止拖拽
    document.removeEventListener('mousemove', this.onMouseMove);
    document.removeEventListener('mouseup', this.onMouseUp);
  }
}

3. 初始化拖拽

初始化时，创建拖拽实例，并添加鼠标事件监听器。

示例代码：

let myDrag = new Drag(box);
box.addEventListener('mousedown', myDrag.onMouseDown.bind(myDrag));

以上是实现拖拽功能的整个流程，接下来介绍一下拖拽功能优化的两种示例。

示例一：对传参参数进行限制

在上述封装方法的基础上，我们可以对传参参数进行限制，确保只传入 DOM 元素。

示例代码：

class Drag {

  constructor(element) {
    if(element instanceof HTMLElement === false) {
      throw new Error('element is not a HTMLElement');
    }
    this.element = element;
    ...
  }
...
}

示例二：使用 ES6模块化

我们还可以使用 ES6 模块化的方式，将拖拽方法封装在一个可重用的模块中。

示例代码：

// 将拖拽方法封装在一个模块中
const drag = {
  onMouseDown(event) {
    ...
  },
  onMouseMove(event) {
    ...
  },
  onMouseUp(event) {
    ...
  }
}

class Drag {

  constructor(element) {
    ...
  }

  init() {
    this.element.addEventListener('mousedown', drag.onMouseDown.bind(this));
  }

  destroy() {
    this.element.removeEventListener('mousedown', drag.onMouseDown.bind(this));
  }
}

export default Drag;

// 在import中导入模块
import Drag from './drag.js'
let myDrag = new Drag(box);
myDrag.init();

以上是 “JS面向对象编程实现的拖拽功能案例详解”的完整攻略。