js用面向对象的方法实现全局拖拽

好的，我可以为您解答这个问题。

首先，我们需要创建一个全局拖拽的类。这个类有两个方法：`init()`和`drag()`。

`init()`方法用于初始化拖拽功能，它接收一个DOM元素作为参数，将该元素添加一个mousedown事件监听器。

`drag()`方法用于实现拖拽功能，它接收一个event对象作为参数，获取鼠标移动的距离，并将目标元素的位置设为该距离。

以下是完整的实现代码：

class Drag {
  constructor() {
    this.dragging = false; // 是否正在拖拽
    this.offsetX = 0; // 鼠标相对于目标元素左上角的偏移量
    this.offsetY = 0;
    this.targetElement = null; // 目标元素
  }

  init(element) {
    this.targetElement = element;
    element.addEventListener('mousedown', this.handleMouseDown.bind(this));
  }

  handleMouseDown(e) {
    this.dragging = true;
    this.offsetX = e.clientX - this.targetElement.offsetLeft;
    this.offsetY = e.clientY - this.targetElement.offsetTop;
    document.addEventListener('mousemove', this.handleMouseMove.bind(this));
    document.addEventListener('mouseup', this.handleMouseUp.bind(this));
  }

  handleMouseMove(e) {
    if (this.dragging) {
      this.targetElement.style.left = e.clientX - this.offsetX + 'px';
      this.targetElement.style.top = e.clientY - this.offsetY + 'px';
    }
  }

  handleMouseUp() {
    this.dragging = false;
    document.removeEventListener('mousemove', this.handleMouseMove);
    document.removeEventListener('mouseup', this.handleMouseUp);
  }
}

const drag = new Drag();
const element = document.getElementById('target'); // 目标元素
drag.init(element);

在上面的代码中，我们创建了一个Drag类，它包含了`init()`和`drag()`两个方法。在`init()`方法中，我们将目标元素添加了一个mousedown事件监听器，当鼠标按下时，会触发`handleMouseDown()`方法。在`handleMouseDown()`方法中，我们记录下了鼠标相对于目标元素左上角的偏移量，并将document添加了mousemove和mouseup事件监听器。在`handleMouseMove()`方法中，如果正在拖拽，就设置目标元素的位置为鼠标移动的距离。在`handleMouseUp()`方法中，我们移除了document上的mousemove和mouseup事件监听器。这样就完成了全局拖拽的实现。

希望这个回答能够帮到您！