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

下面是JS实现拖拽效果（构造函数）的完整攻略：

1. 定义构造函数

首先，我们需要定义一个构造函数来创建拖拽对象。可以使用function关键字和this关键字来实现：

function Drag(element) {
  this.element = element;
  // 初始化一些值
}

在这个构造函数中，我们通过this.element来引用需要拖拽的元素。你可以进行一些初始化工作，例如记录初始位置、绑定事件等。

2. 绑定事件

接下来，我们需要绑定一些事件来处理拖拽过程。一般情况下，我们需要绑定mousedown、mousemove和mouseup事件：

function Drag(element) {
  this.element = element;

  this.element.addEventListener('mousedown', this.start.bind(this));
  document.addEventListener('mousemove', this.move.bind(this));
  document.addEventListener('mouseup', this.end.bind(this));

  // 初始化一些值
}

注意到这里使用了bind函数来绑定this，确保在回调函数中this关键字指向当前的拖拽对象。

3. 实现拖拽

在事件回调函数中，我们需要实现拖拽的逻辑。一般情况下，我们需要使用clientX和clientY来获取当前鼠标的位置：

function Drag(element) {
  this.element = element;

  this.element.addEventListener('mousedown', this.start.bind(this));
  document.addEventListener('mousemove', this.move.bind(this));
  document.addEventListener('mouseup', this.end.bind(this));

  this.dragging = false; // 是否正在拖拽
  this.x = 0; // 鼠标按下时的位置
  this.y = 0;
  this.offsetX = 0; // 鼠标按下时鼠标与元素的距离
  this.offsetY = 0;

  // 初始化一些值
}

Drag.prototype.start = function(e) {
  this.dragging = true;
  this.x = e.clientX;
  this.y = e.clientY;

  this.offsetX = this.x - this.element.offsetLeft;
  this.offsetY = this.y - this.element.offsetTop;

  // TODO: 添加一些拖拽开始时的逻辑
}

Drag.prototype.move = function(e) {
  if (this.dragging) {
    var x = e.clientX;
    var y = e.clientY;

    this.element.style.left = x - this.offsetX + 'px';
    this.element.style.top = y - this.offsetY + 'px';

    // TODO: 添加一些拖拽过程中的逻辑
  }
}

Drag.prototype.end = function(e) {
  this.dragging = false;

  // TODO: 添加一些拖拽结束时的逻辑
}

在start函数中，我们记录下鼠标按下时的位置和鼠标与元素的距离，并将dragging标志设置为true，表示正在拖拽。

在move函数中，我们通过当前鼠标的位置和鼠标与元素的距离计算出元素应该移动的位置，并将其应用到元素的style属性上。注意到在计算位置时必须考虑到滚动条的影响。

在end函数中，我们将dragging标志设置为false，表示拖拽结束。

示例

下面展示两个示例来说明如何使用这个拖拽函数。

示例1：拖拽div

首先，在HTML中创建一个可以拖拽的div元素：

<div id="drag" style="background-color: green; width: 100px; height: 100px; position: absolute; left: 100px; top: 100px;"></div>

然后，在JS中使用构造函数来创建拖拽对象：

var element = document.getElementById('drag');
var drag = new Drag(element);

示例2：拖拽图片

首先，在HTML中创建一个可拖拽的图片元素：

<img id="drag" src="http://placehold.it/200x200" style="position: absolute; left: 100px; top: 100px;">

然后，在JS中使用构造函数来创建拖拽对象。注意到这里需要引用图片的parentNode，否则在拖拽过程中图片可能会移动到其他位置或者看不到：

var element = document.getElementById('drag').parentNode;
var drag = new Drag(element);

总结

至此，我们已经完成了使用构造函数来实现拖拽效果的详细攻略。你可以根据自己的需要进行一些定制修改，例如添加一些边界约束或者限制拖拽的范围等。