一个js拖拽的效果类和dom-drag.js浅析

一个JS拖拽效果类和dom-drag.js浅析

简介

在Web开发中经常会用到拖拽效果，通过鼠标拖拽元素然后移动到指定位置的操作。这里将介绍JS实现拖拽效果的步骤和原理，并且分析一下dom-drag.js这个开源库的具体实现方式。

拖拽效果的实现步骤

1. 获取拖拽元素

首先需要获取要拖拽的元素，可以通过document.getElementById等方法获取元素的引用。

let element = document.getElementById('drag-element');

2. 监听鼠标事件

为了实现拖拽效果，需要监听鼠标事件。通常会监听mousedown事件，当鼠标按下时记录鼠标位置和元素位置。然后监听mousemove事件，当鼠标移动时根据鼠标的偏移量移动元素。最后监听mouseup事件，当鼠标松开时停止拖拽效果。

element.addEventListener('mousedown', (e) => {
  // 记录鼠标按下时的位置和元素位置
  const startX = e.clientX;
  const startY = e.clientY;
  const elementX = element.offsetLeft;
  const elementY = element.offsetTop;

  function onMouseMove(moveEvent) {
    // 计算元素的偏移量
    const offsetX = moveEvent.clientX - startX;
    const offsetY = moveEvent.clientY - startY;

    // 移动元素
    element.style.left = elementX + offsetX + 'px';
    element.style.top = elementY + offsetY + 'px';
  }

  function onMouseUp() {
    // 停止拖拽效果
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }

  // 监听鼠标移动和松开事件
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

3. 阻止默认拖拽

当拖拽元素是一个链接或图片时，浏览器会默认启用拖拽行为。为了避免出现这种情况，需要在mousedown事件中阻止默认行为。

element.addEventListener('mousedown', (e) => {
  e.preventDefault();

  // ...
});

dom-drag.js的实现方式

dom-drag.js是一款简单易用的JS拖拽效果类库。它的实现方式类似于上面提到的步骤，只不过封装了更多细节和扩展功能。

function dnd(element) {
  let startX = 0;
  let startY = 0;
  let elementX = 0;
  let elementY = 0;

  element.addEventListener('mousedown', onMouseDown);

  function onMouseDown(e) {
    e.preventDefault();
    startX = e.clientX;
    startY = e.clientY;
    elementX = element.offsetLeft;
    elementY = element.offsetTop;

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  }

  function onMouseMove(e) {
    e.preventDefault();
    const offsetX = e.clientX - startX;
    const offsetY = e.clientY - startY;
    element.style.left = elementX + offsetX + 'px';
    element.style.top = elementY + offsetY + 'px';
  }

  function onMouseUp(e) {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }
}

dom-drag.js中用一个dnd函数实现了拖拽效果。当需要拖拽的元素被传入到dnd函数中时，会为该元素监听mousedown事件。当鼠标按下时，记录鼠标位置和元素位置，并且监听mousemove和mouseup事件。在mousemove事件中移动元素，mouseup事件中停止拖拽效果。

dom-drag.js还封装了一些扩展功能，例如：限制拖拽范围、透明度渐变、跟随鼠标旋转等。

示例说明

示例1

下面是一个简单的拖拽示例，通过红色方块来实现鼠标拖拽黄色小球的效果。

<div id="container">
  <div class="drag-handle"></div>
  <div class="drag-target"></div>
</div>

#container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.drag-handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  background-color: red;
  cursor: move;
}

.drag-target {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  background-color: yellow;
  border-radius: 50%;
}

const handleElement = document.querySelector('.drag-handle');
const targetElement = document.querySelector('.drag-target');

dnd(handleElement, targetElement);

示例2

下面是一个dom-drag.js的例子，展示如何实现跟随鼠标旋转的效果。

<div id="test"></div>

#test {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: move;
}

dnd(document.getElementById('test'));
let angle = 0;

function onMouseMove(e) {
  const rect = document.getElementById('test').getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;
  const radian = Math.atan2(e.clientY - centerY, e.clientX - centerX);
  const degree = radian * 180 / Math.PI;
  angle = degree;
  document.getElementById('test').style.transform = `rotate(${degree}deg)`;
}

document.addEventListener('mousemove', onMouseMove);

setInterval(() => {
  angle++;
  document.getElementById('test').style.transform = `rotate(${angle}deg)`;
}, 1000 / 60);

在这个例子中，为红色方块绑定了拖拽效果，并且在鼠标移动时改变方块的旋转角度。同时使用setInterval实现旋转效果，以每秒60帧的速度来更新角度。