drag事件未触发求助：拖拽元素时无法添加指定类

核心问题：元素未开启拖拽权限 #

HTML里大部分普通元素（比如<div>）默认不支持拖拽，必须给目标元素加上draggable="true"属性，才能触发拖拽相关事件。

修改后的HTML代码：

<div class="list">
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
</div>

优化事件绑定逻辑 #

drag事件会在拖拽过程中持续触发，实际开发中更推荐用dragstart在拖拽开始时添加类，dragend在拖拽结束时移除类，避免样式残留：

修改后的JS代码：

const items = document.querySelectorAll(".item");

items.forEach((item) => {
  // 拖拽开始时添加样式类
  item.addEventListener("dragstart", () => {
    item.classList.add("dragging");
  });
  // 拖拽结束时移除样式类
  item.addEventListener("dragend", () => {
    item.classList.remove("dragging");
  });
});

额外说明 #

不需要在拖拽事件中调用preventDefault()，除非你需要阻止特定默认行为（比如拖拽文本时的选中效果），开启draggable属性后事件就能正常触发。

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