怎么使用 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中实现拖拽功能的基本方法。你可以根据需要调整样式和逻辑。例如，添加拖拽的边界限制，或者支持触摸设备的拖拽等。

题目要点：

一个元素的拖拽过程，我们可以分为三个步骤:

1. 第一步是鼠标按下目标元素
2. 第二步是鼠标保持按下的状态移动鼠标
3. 第三步是鼠标抬起，拖拽过程结束

这三步分别对应了三个事件，mousedown 事件，mousemove 事件和 mouseup 事件。只有在鼠标按下的状态移动鼠标我们才会执行拖拽事件，因此我们需要在 mousedown 事件中设置一个状态来标识鼠标已经按下，然后在 mouseup 事件中再取消这个状态。在 mousedown 事件中我们首先应该判断，目标元素是否为拖拽元素，如果是拖拽元素，我们就设置状态并且保存这个时候鼠标的位置。然后在 mousemove 事件中，我们通过判断鼠标现在的位置和以前位置的相对移动，来确定拖拽元素在移动中的坐标。最后 mouseup 事件触发后，清除状态，结束拖拽事件。