基于javascript的拖拽类封装详解

拖拽是Web开发中比较常见的一种交互方式，它可以让用户直接拖拽页面上的元素完成一些操作，如实现拖拽排序、拖拽上传等功能。本文将详细讲解如何使用JavaScript来封装一个拖拽类，以实现可复用的拖拽功能。

实现思路

我们需要实现一个拖拽类，它具备以下功能：

1. 鼠标按下时，记录鼠标相对元素左上角的偏移量；
2. 鼠标移动时，根据鼠标位置计算元素新的位置；
3. 鼠标抬起时，完成元素的拖拽操作。

为了实现以上功能，我们可以绑定元素的mousedown、mousemove和mouseup事件，然后在事件处理函数中实现相应的逻辑。

代码实现

下面是一个基础的拖拽类的实现代码（使用ES6语法）：

class Drag {
  constructor(ele) {
    this.ele = ele;
    this.offsetX = 0;
    this.offsetY = 0;

    this.dragStart = this.dragStart.bind(this);
    this.dragMove = this.dragMove.bind(this);
    this.dragEnd = this.dragEnd.bind(this);

    // 绑定事件
    ele.addEventListener('mousedown', this.dragStart);
    ele.addEventListener('mousemove', this.dragMove);
    ele.addEventListener('mouseup', this.dragEnd);
  }

  // 鼠标按下时触发
  dragStart(e) {
    this.offsetX = e.clientX - this.ele.offsetLeft;
    this.offsetY = e.clientY - this.ele.offsetTop;
  }

  // 鼠标移动时触发
  dragMove(e) {
    if (e.buttons !== 1) { // 鼠标左键未按下
      return;
    }
    const left = e.clientX - this.offsetX;
    const top = e.clientY - this.offsetY;
    this.ele.style.left = `${left}px`;
    this.ele.style.top = `${top}px`;
  }

  // 鼠标抬起时触发
  dragEnd(e) {}

  // 销毁，移除事件绑定
  destroy() {
    this.ele.removeEventListener('mousedown', this.dragStart);
    this.ele.removeEventListener('mousemove', this.dragMove);
    this.ele.removeEventListener('mouseup', this.dragEnd);
  }
}

我们可以使用该类来实现一个简单的拖拽示例。

<div id="box" style="position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background-color: #ccc;"></div>
<script>
  const box = document.querySelector('#box');
  const drag = new Drag(box);
</script>

在上述示例中，我们创建了一个宽为100px、高为100px、背景颜色为灰色的盒子，并使用拖拽类绑定了该盒子元素。当鼠标按下左键并移动时，鼠标经过的地方会出现一个虚线框，表示元素的新位置；当鼠标抬起时，盒子元素被固定在新位置。

另外，我们也可以使用该类实现拖拽排序功能。例如，我们创建了一个包含若干个可拖拽的元素的列表，可以使用拖拽类实现这些元素的排序功能。

<ul id="list" style="list-style: none; padding: 0;">
  <li class="item" style="background-color: #f00;">1</li>
  <li class="item" style="background-color: #0f0;">2</li>
  <li class="item" style="background-color: #00f;">3</li>
</ul>
<script>
  const list = document.querySelector('#list');
  const items = document.querySelectorAll('.item');
  items.forEach(item => {
    new Drag(item);
  });
</script>

在上述示例中，我们创建了一个包含三个具有不同背景颜色的元素的列表，并使用拖拽类绑定了每个元素。当拖动其中的一个元素时，其他元素会自动调整顺序。

总结

通过以上示例，我们可以看到使用JavaScript封装一个拖拽类是相对简单的。在实现过程中，我们需要注意的是绑定事件的方法和一些细节问题，例如鼠标按下时的偏移量计算、鼠标左键的判断、拖拽元素的样式等。使用封装好的拖拽类，我们可以减少代码量，提高代码的复用性和可维护性，同时也可以丰富页面的交互效果。