怎么使用 js 实现拖拽功能？

在JavaScript中实现拖拽功能，通常需要监听几个关键的事件：mousedown（或touchstart对于移动设备）、mousemove（或touchmove）、mouseup（或touchend 和 touchcancel）以及mouseover（可选，用于处理元素边界外的移动）。以下是一个基本的拖拽功能的实现步骤：

1. HTML 结构

首先，你需要一个可以拖拽的元素。

<div
  id="draggable"
  style="width: 100px; height: 100px; background-color: red; position: absolute; cursor: pointer;"
>
  拖拽我
</div>

2. CSS 样式

在上面的HTML中，我已经简单设置了样式，使元素可拖动并有一个明显的背景色。

3. JavaScript 实现

接下来，我们用JavaScript来添加拖拽逻辑。

let selected = null; // 当前被选中的拖拽元素
let x_pos = 0; // 初始X位置
let y_pos = 0; // 初始Y位置
let x_elem = 0; // 鼠标按下时的X位置
let y_elem = 0; // 鼠标按下时的Y位置

// 绑定mousedown事件
document
  .getElementById("draggable")
  .addEventListener("mousedown", dragMouseDown, false);

function dragMouseDown(e) {
  e = e || window.event;
  e.preventDefault(); // 阻止默认行为（如链接的跳转）
  // 获取拖拽的元素
  selected = this;
  x_elem = x_pos = e.clientX - parseInt(selected.style.left, 10);
  y_elem = y_pos = e.clientY - parseInt(selected.style.top, 10);

  // 绑定mousemove和mouseup事件到整个文档，以便在整个页面上拖动
  document.documentElement.addEventListener("mousemove", dragMouseMove, false);
  document.documentElement.addEventListener("mouseup", closeDragElement, false);
}

function dragMouseMove(e) {
  e = e || window.event;
  e.preventDefault();
  // 计算新的位置
  x_pos = e.clientX - x_elem;
  y_pos = e.clientY - y_elem;

  // 设置元素的新位置
  selected.style.left = x_pos + "px";
  selected.style.top = y_pos + "px";
}

function closeDragElement() {
  // 停止移动时，移除mousemove和mouseup事件监听器
  document.documentElement.removeEventListener(
    "mousemove",
    dragMouseMove,
    false,
  );
  document.documentElement.removeEventListener(
    "mouseup",
    closeDragElement,
    false,
  );
  selected = null;
}

说明

• mousedown: 当鼠标按下时，获取当前元素和鼠标相对于元素的位置。然后，将mousemove和mouseup的监听器绑定到整个文档上，这样你就可以在文档的任何地方拖动元素。
• mousemove: 当鼠标移动时，计算元素的新位置，并更新元素的样式。
• mouseup: 当鼠标释放时，移除mousemove和mouseup的监听器，避免不必要的性能消耗。

以上就是在JavaScript中实现拖拽功能的基本方法。你可以根据需要调整样式和逻辑。例如，添加拖拽的边界限制，或者支持触摸设备的拖拽等。