js实现拖拽效果（构造函数）

2. 实现步骤

基于以上核心思路，我们可以通过如下步骤来实现拖拽效果：

2.1. 创建拖拽目标元素

首先，我们需要在 HTML 页面中创建一个拖拽目标元素。例如：

<div id="drag-target">拖我拖我</div>

2.2. 实现构造函数

接下来，我们需要实现一个拖拽构造函数。该构造函数接受两个参数：
- targetElement：拖拽目标元素；
- gripElement：在该元素上按下鼠标时触发拖拽。

function Draggable(targetElement, gripElement) {
  // 保存拖拽目标元素
  this.targetElement = targetElement;

  // 如果没有指定 gripElement，则将拖拽目标元素本身作为 gripElement
  if (gripElement === undefined) {
    gripElement = targetElement;
  }

  // 保存 gripElement 和激活拖拽的事件处理函数
  this.gripElement = gripElement;
  this.dragHandler = this.handleDrag.bind(this);

  // 给 gripElement 绑定 mousedown 事件处理函数
  this.gripElement.addEventListener('mousedown', this.dragHandler);
}

在构造函数中，我们保存了拖拽目标元素targetElement和绑定拖拽的响应元素gripElement。如果gripElement未指定，则默认使用targetElement作为gripElement。同时，我们保存了一个事件处理函数dragHandler，该处理函数会在鼠标拖拽时被调用。

2.3. 实现事件处理函数

接下来，我们需要实现事件处理函数handleDrag。该函数会实时计算目标元素需要移动到的位置，并更新目标元素的style.left和style.top属性。

Draggable.prototype.handleDrag = function(event) {
  // 记录鼠标按下时的初始位置以及拖拽目标的初始位置
  var startX = event.clientX;
  var startY = event.clientY;
  var targetX = this.targetElement.offsetLeft;
  var targetY = this.targetElement.offsetTop;

  // 给 document 绑定 mousemove 和 mouseup 事件处理函数
  document.addEventListener('mousemove', this.dragHandler);
  document.addEventListener('mouseup', this.handleDrop.bind(this));

  // 在拖拽过程中实时计算目标位置并更新拖拽目标元素的位置
  var draggable = this;
  function doDrag(event) {
    var deltaX = event.clientX - startX;
    var deltaY = event.clientY - startY;
    draggable.targetElement.style.left = (targetX + deltaX) + 'px';
    draggable.targetElement.style.top = (targetY + deltaY) + 'px';
  };
  doDrag(event);
};

在事件处理函数中，我们首先记录了mousedown时的鼠标位置和目标元素的位置。然后，我们给document绑定了mousemove和mouseup事件处理函数，并将handleDrop作为mouseup事件的处理函数。

在mousemove事件中，我们通过计算鼠标位置相对于初始位置的增量，然后更新目标元素的位置，从而实现元素的拖拽效果。在计算目标位置和更新目标元素位置时，我们使用了当前构造函数实例的引用this来获取相关属性。

2.4. 实现拖拽结束处理函数

最后，我们需要实现一个拖拽结束的处理函数handleDrop。该函数会在拖拽结束时被调用，解除对mousemove和mouseup事件的监听，从而停止拖拽。

Draggable.prototype.handleDrop = function() {
  document.removeEventListener('mousemove', this.dragHandler);
  document.removeEventListener('mouseup', this.handleDrop.bind(this));
};

在该函数中，我们通过document.removeEventListener方法解除mousemove和mouseup事件的监听，从而停止拖拽。需要注意的是，在调用removeEventListener方法时，我们需要使用bind方法将当前构造函数实例的引用this传递到事件处理函数中。

3. 示例说明

下面给出两个简单的示例，演示如何使用上述构造函数实现拖拽效果。

3.1. 示例一

在该示例中，我们将一个<div>元素绑定为拖拽目标元素和触发拖拽的元素。

<div id="drag-me" style="position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background-color: teal; cursor: move;">
  拖我拖我
</div>

<script>
  // 创建拖拽实例
  var myDraggable = new Draggable(document.getElementById('drag-me'));
</script>

在该示例中，我们首先在 HTML 页面中创建了一个带有 ID 的<div>元素，并设置了其样式、内容以及鼠标样式。接着，在 JavaScript 中创建一个拖拽实例，将该<div>元素作为拖拽目标元素传递给构造函数，并通过默认值将该<div>元素本身作为触发拖拽的元素。

3.2. 示例二

在该示例中，我们将一个按钮绑定为拖拽触发元素，并将一个图像绑定为拖拽目标元素。

<button id="drag-button">按下拖我</button>
<img id="drag-image" src="https://picsum.photos/200" style="position: absolute; left: 100px; top: 100px; width: 200px; height: 200px; cursor: move;">

<script>
  // 创建拖拽实例
  var myDraggable = new Draggable(document.getElementById('drag-image'), document.getElementById('drag-button'));
</script>

在该示例中，我们首先在 HTML 页面中创建了一个按钮和一个图像，并各自设置了其样式、内容、图片地址和鼠标样式。接着，在 JavaScript 中创建一个拖拽实例，将该图像元素作为拖拽目标元素，将该按钮元素作为触发拖拽的元素传递给构造函数。