瀑布流拖拽排序必须用事件委托，因卡片动态增删频繁，单独绑定事件无法兼容新节点；dragstart需轻量初始化，dragover/drop必须委托到容器，再通过坐标比对实现错落布局下的精准插入。

在卡片瀑布流中用事件委托处理拖拽排序，核心是把 dragstart、dragover、drop 等事件统一绑定到容器上，再通过事件目标（event.target）判断是否为可拖拽卡片，避免为每个卡片单独绑定事件，提升性能和动态渲染兼容性。

为什么瀑布流里必须用事件委托做拖拽排序

瀑布流布局常依赖 JS 动态计算高度、异步加载卡片（如无限滚动），卡片节点频繁增删。若对每个卡片调用 element.draggable = true 并监听 dragstart，新插入的卡片不会自动拥有拖拽能力，还需重复初始化；而事件委托只需一次绑定，天然支持动态内容。

注意：dragstart 无法真正委托（浏览器只在被设为 draggable="true" 的元素上触发），但 dragover 和 drop 可以且必须委托——因为它们发生在目标区域，而非源元素上。

关键三步：设置 draggable + 容器委托 + 插入逻辑

以一个 class 为 waterfall-grid 的容器为例：

sc-java-to-ts-interface

将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。

下载

• 给卡片标记可拖拽：在渲染卡片时添加 draggable="true" 和唯一 data 属性，例如：
  
  ...
• 在容器上监听 dragover/drop：阻止默认行为，否则 drop 不会触发
  grid.addEventListener('dragover', e => e.preventDefault());
  grid.addEventListener('drop', handleDrop);
• 在 drop 时定位插入位置：利用 e.clientY 或卡片边界对比，找到最邻近的「目标卡片」，再用 insertBefore 或 appendChild 调整 DOM 顺序

如何精准判断 drop 位置（适配瀑布流错落）

瀑布流中卡片高度不一、列宽不定，不能简单按 DOM 顺序插入。推荐用「垂直中点比对法」：

• 在 dragover 阶段，遍历所有卡片（排除自己），获取其 getBoundingClientRect()
• 计算当前鼠标 Y 坐标与卡片上下边界的距离，取最近的卡片作为插入参考
• 若鼠标在卡片上半区，插入到它前面；在下半区，则插入到它后面
• 首尾边界需单独处理：鼠标在容器顶部 → 插入最前；在底部 → 插入最后

别忘了 dragstart 的轻量初始化

虽然 dragstart 不能委托，但无需为每个卡片绑定独立 handler。可在容器上监听 dragstart，利用事件冒泡捕获源卡片：

• grid.addEventListener('dragstart', e => {
    if (e.target.classList.contains('card')) {
      e.dataTransfer.setData('text/plain', e.target.dataset.id);
    }
  });
• 这样既复用监听，又避免重复绑定；dataTransfer 中存 ID 而非 DOM 引用，防止跨容器误操作