如何用原生JS实现类似Raphael.js的点击拖拽添加/移除障碍物功能？

我明白你想要的效果——按住鼠标拖拽时连续添加或移除障碍物，点击单个格子也能切换它的状态，就像那个路径可视化工具里的操作一样。你的现有代码问题在于没有跟踪鼠标按下的状态，也没有切换障碍物状态的逻辑，下面是完整的原生JS解决方案：

核心思路 #

• 用一个变量跟踪鼠标是否处于按下状态，确保只有按住鼠标时，移动才会修改格子
• 给每个格子绑定mousedown（点击/开始拖拽）和mouseover（拖拽经过）事件
• 在全局document上绑定mouseup事件，防止鼠标移出格子区域后无法停止操作
• 实现切换障碍物状态的逻辑（点击单个格子切换，拖拽时连续切换）

完整代码示例 #

假设你的格子元素都带有cell类，障碍物样式用obstacle类：

// 状态变量：跟踪鼠标是否按下
let isMouseDown = false;

// 获取所有格子元素
const cells = document.querySelectorAll('.cell');

// 给每个格子绑定事件
cells.forEach(cell => {
    // 鼠标按下：切换当前格子状态，标记鼠标按下
    cell.addEventListener('mousedown', (e) => {
        e.preventDefault(); // 阻止默认选中文字等行为
        isMouseDown = true;
        toggleObstacle(cell);
    });

    // 鼠标经过格子：如果鼠标按下，切换状态
    cell.addEventListener('mouseover', () => {
        if (isMouseDown) {
            toggleObstacle(cell);
        }
    });
});

// 全局监听鼠标松开：重置按下状态
document.addEventListener('mouseup', () => {
    isMouseDown = false;
});

// 切换障碍物状态的工具函数
function toggleObstacle(element) {
    element.classList.toggle('obstacle');
}

如果需要切换「添加/移除」模式 #

如果你想要像示例那样，用按钮切换是添加障碍物还是移除，可以扩展代码：

// 新增模式状态变量
let isAdding = true;

// 获取模式切换按钮（假设按钮id分别为add-btn和remove-btn）
const addBtn = document.getElementById('add-btn');
const removeBtn = document.getElementById('remove-btn');

// 绑定按钮点击事件
addBtn.addEventListener('click', () => {
    isAdding = true;
    addBtn.classList.add('active');
    removeBtn.classList.remove('active');
});

removeBtn.addEventListener('click', () => {
    isAdding = false;
    removeBtn.classList.add('active');
    addBtn.classList.remove('active');
});

// 修改操作函数：根据当前模式添加/移除类
function modifyObstacle(element) {
    if (isAdding) {
        element.classList.add('obstacle');
    } else {
        element.classList.remove('obstacle');
    }
}

// 记得把之前的toggleObstacle替换成modifyObstacle

为什么你的原有代码不行？ #

你的代码没有判断isMouseDown状态，所以只要鼠标经过格子就会添加obstacle类，无法实现“按住拖拽才操作”的效果；同时缺少移除障碍物的逻辑，只能添加不能取消。

内容的提问来源于stack exchange，提问作者kea