JS Draggable|极客笔记

JS Draggable

1. 介绍

在前端开发中，经常会遇到需要实现拖拽功能的场景，比如拖拽元素改变位置、拖拽改变元素的大小等等。而使用JavaScript来实现这些功能，可以通过添加一些事件监听和操作DOM元素来实现。

本文将详细介绍如何使用JavaScript实现拖拽功能，并提供一些示例代码来帮助理解。

2. 基本原理

拖拽功能的实现原理是通过监听鼠标或触摸设备的一系列事件来跟踪用户的操作，并改变相应的DOM元素的位置或大小。

常用的事件包括：

mousedown（鼠标按下）
mousemove （鼠标移动）
mouseup（鼠标松开）

通过这些事件，可以获取鼠标或触摸设备的位置信息，并根据用户的操作改变拖拽元素的位置或大小。

3. 实现步骤

要实现拖拽功能，我们可以按照以下步骤来进行：

3.1. 添加事件监听

首先，需要对拖拽元素添加事件监听。一般来说，拖拽功能可以分为两个阶段：鼠标按下和移动，以及鼠标松开。我们需要分别对这三个阶段的事件进行监听。

const draggableElement = document.querySelector('.draggable');

draggableElement.addEventListener('mousedown', onDragStart);
document.addEventListener('mousemove', onDrag);
document.addEventListener('mouseup', onDragEnd);

在上述代码中，我们使用querySelector方法选择了一个拖拽元素，并给它添加了mousedown事件监听。同时，给整个文档添加了mousemove和mouseup事件监听。

3.2. 处理鼠标按下事件

当鼠标按下时，我们需要记录下当前鼠标的位置，并且将鼠标样式设置为已按下状态。还可以进行一些特定操作，比如给拖拽元素添加一些样式或者其他行为。

let isDragging = false;
let startX;
let startY;

function onDragStart(event) {
  isDragging = true;
  startX = event.clientX;
  startY = event.clientY;
  draggableElement.classList.add('dragging');
}

在上述代码中，我们使用了三个变量来记录当前的拖拽状态和鼠标的位置。通过event.clientX和event.clientY可以获取鼠标相对于浏览器窗口的位置。

3.3. 处理鼠标移动事件

当鼠标移动时，我们需要根据鼠标的位置改变拖拽元素的位置。可以通过计算鼠标的偏移量和初始位置，来设置拖拽元素的新位置。

function onDrag(event) {
  if (!isDragging) return;

  const offsetX = event.clientX - startX;
  const offsetY = event.clientY - startY;

  draggableElement.style.transform = `translate( ${offsetX}px,$ {offsetY}px)`;
}

在上述代码中，我们通过计算鼠标的偏移量，使用CSS的translate属性来改变拖拽元素的位置。

3.4. 处理鼠标松开事件

当鼠标松开时，我们需要结束拖拽状态，并移除相关的事件监听。可以根据需要进行一些额外的操作。

function onDragEnd() {
  isDragging = false;
  draggableElement.classList.remove('dragging');

  // Do something else after dragging ends
}

在上述代码中，除了结束拖拽状态并移除样式外，我们还可以在onDragEnd函数中添加其他需要执行的代码。

4. 示例

下面是一个简单的示例，展示了如何使用JavaScript实现可拖拽的元素：

<!DOCTYPE html>
<html>
<head>
  <style>
    .draggable {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
    }

    .dragging {
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div class="draggable"></div>

  <script>
    const draggableElement = document.querySelector('.draggable');

    let isDragging = false;
    let startX;
    let startY;

    function onDragStart(event) {
      isDragging = true;
      startX = event.clientX;
      startY = event.clientY;
      draggableElement.classList.add('dragging');
    }

    function onDrag(event) {
      if (!isDragging) return;

      const offsetX = event.clientX - startX;
      const offsetY = event.clientY - startY;

      draggableElement.style.transform = `translate( ${offsetX}px,$ {offsetY}px)`;
    }

    function onDragEnd() {
      isDragging = false;
      draggableElement.classList.remove('dragging');
    }

    draggableElement.addEventListener('mousedown', onDragStart);
    document.addEventListener('mousemove', onDrag);
    document.addEventListener('mouseup', onDragEnd);
  </script>
</body>
</html>

在上述示例中，我们创建了一个红色的正方形元素，并通过CSS将其设置为绝对定位。然后，我们使用JavaScript实现了对该元素的拖拽功能。