动态创建HTML元素dragstart事件绑定失效求助

核心问题：拼写错误导致拖拽属性失效 #

你动态创建棋子时，设置拖拽属性的代码写错了：

figure.setAttribute("graggable", true);

这里的属性名是**graggable（多了一个字母g），而正确的HTML拖拽属性应该是draggable**。静态创建的棋子用了正确的draggable="true"，所以能正常触发dragstart，但动态元素的属性名错误，浏览器无法识别，自然无法启用拖拽功能。

修复方案 #

把错误的属性名修正为正确的draggable，可以用两种方式：

1. 使用setAttribute：

figure.setAttribute("draggable", true);

2. 直接设置DOM元素的属性（更简洁）：

figure.draggable = true;

额外优化建议 #

• 遍历元素绑定事件时，forEach比map更合适，因为map的设计目的是返回新数组，而这里只是执行绑定操作，语义更清晰：

function DragEventAdd() {
    let figures = window.document.querySelectorAll(".figure");
    figures.forEach(f => {
        f.addEventListener('dragstart', (event) => {
            console.log("drag started");
        });
    });
}

修复后，动态创建的棋子应该能正常触发dragstart事件了。

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