JavaScript 实现拖拽效果组件功能(兼容移动端)

下面是详细讲解“JavaScript 实现拖拽效果组件功能(兼容移动端)”的完整攻略：

一、需求分析

首先分析一下需求，要实现的功能是实现一个拖拽效果组件，用户可以通过拖拽元素来改变元素的位置。由于需要兼容移动端，所以要考虑触摸事件的处理。

二、实现思路

实现拖拽效果组件可以使用鼠标事件或触摸事件，以下是相关的事件：

• 鼠标事件：mousedown、mousemove、mouseup
• 触摸事件：touchstart、touchmove、touchend

拖拽主要分为以下几个步骤：

1. 监听mousedown或touchstart事件，记录起始位置（x1, y1）；
2. 监听mousemove或touchmove事件，计算移动距离dx和dy，并设置元素位置为（x1+dx, y1+dy）；
3. 监听mouseup或touchend事件，结束拖拽。

三、代码实现

以下是拖拽效果组件的代码实现。实现过程中，我们使用了event.preventDefault()方法来取消默认行为，以便更好地处理拖拽事件。

function Drag(ele){
  // 获取需要拖拽的元素
  this.ele = ele;
  this.init();
}
Drag.prototype = {
  constructor: Drag,
  // 初始化
  init: function(){
    var self = this;
    // 添加监听事件
    this.ele.addEventListener("mousedown", function(e){
        self.startDrag(e);
    });
    this.ele.addEventListener("touchstart", function(e){
        e.preventDefault();
        self.startDrag(e.touches[0]);
    });
  },
  // 开始拖拽
  startDrag: function(event){
    var self = this;
    var startX = event.clientX || event.pageX;
    var startY = event.clientY || event.pageY;
    // 添加监听事件
    document.addEventListener("mousemove", move);
    document.addEventListener("mouseup", end);
    document.addEventListener("touchmove", move);
    document.addEventListener("touchend", end);

    function move(event) {
      var endX = event.clientX || event.pageX;
      var endY = event.clientY || event.pageY;
      var dx = endX - startX;
      var dy = endY - startY;
      self.ele.style.left = self.ele.offsetLeft + dx + "px";
      self.ele.style.top = self.ele.offsetTop + dy + "px";
      startX = endX;
      startY = endY;
    }

    function end() {
      // 移除监听事件
      document.removeEventListener("mousemove", move);
      document.removeEventListener("mouseup", end);
      document.removeEventListener("touchmove", move);
      document.removeEventListener("touchend", end);
    }
  }
};

在代码中，我们将起始位置记录在startX和startY中，然后计算拖拽的距离dx和dy，并设置元素的位置。最后在结束拖拽时，移除监听事件即可。

以下是使用拖拽效果组件的一个示例：

<div id="drag">拖动我</div>

var dragEle = document.getElementById("drag");
new Drag(dragEle);

以上就是实现拖拽效果组件的完整攻略。通过上述代码实现，我们可以在网页中自由实现拖拽效果，并且也兼容移动端。