使用closest()识别点击事件的最近拖拽元素，实现共享onMouseDown处理逻辑

原有代码的核心问题 #

• 连续两次对current_dragging_element赋值，后一次的.draggable_item匹配结果会无条件覆盖前一次的.draggable_list匹配结果，完全违背就近匹配的逻辑
• if分支没有实际判断条件，无法根据点击位置选择对应匹配的目标
• 给left/top赋值时缺少px单位，部分浏览器无法识别非法的定位值

核心逻辑修正 #

Element.closest()方法原生支持逗号分隔的多选择器匹配规则：会从事件触发节点开始沿DOM树向上遍历，返回第一个匹配任意选择器规则的元素，这天然满足你「定位距离点击节点更近的目标元素」的需求，不需要额外写冗余的分支判断。

• 直接将.draggable_item和.draggable_list合并为组合选择器传入匹配方法，一步完成就近目标定位
• 增加空值拦截，当点击未命中任何可拖拽元素时直接退出函数，避免对空值设置样式导致的运行报错
• 补充定位值的单位拼接，修复原有样式不生效的问题

完整可运行代码 #

// 全局存储当前拖拽的目标元素
let current_dragging_element = null;

async function onMouseDown(event) {
  // 一步完成就近可拖拽目标匹配
  current_dragging_element = event.target.closest(".draggable_item, .draggable_list");

  // 未命中可拖拽元素时直接终止流程
  if (!current_dragging_element) return;

  // 原有拖拽样式配置逻辑
  document.body.classList.add("noselect");
  current_dragging_element.style.transform = "rotate(5deg)";
  current_dragging_element.style.left = `${event.clientX - 20}px`;
  current_dragging_element.style.top = `${event.clientY - 20}px`;
  current_dragging_element.classList.add("drag");
  current_dragging_element.style.position = "fixed";
  current_dragging_element.style.zIndex = 999;
}

匹配效果说明 #

针对常见的嵌套DOM结构，该逻辑的匹配表现完全符合预期：

<div class="draggable_list">
  列表头部区域
  <div class="draggable_item">列表项1</div>
  <div class="draggable_item">列表项2</div>
</div>

• 点击列表项内容时，会优先匹配离点击节点最近的.draggable_item，不会误匹配外层的列表容器
• 点击列表头部空白区域时，因为当前DOM分支内不存在.draggable_item，会自动向上匹配外层的.draggable_list，支持列表本身的拖拽触发

即使你的页面中.draggable_item和.draggable_list是完全平级、不存在嵌套关系的元素，该匹配逻辑依然能正确识别离点击源最近的目标，不需要额外调整分支判断。

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