用 CSS Grid 实现响应式看板：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 实现等宽自适应列，每列 overflow-y: auto、min-height: 60vh，禁用 grid-gap 改用 padding；拖拽需全程 preventDefault()，动态插入 pointer-events: none 占位符辅助定位；iOS 需降级为 touch 事件模拟。
用 CSS Grid 实现响应式看板容器，别碰 float 或 inline-block
纯 CSS 实现 Kanban 列布局，核心是让每列（column）等宽、自适应、可滚动，同时列内卡片垂直堆叠。用 display: grid 配合 grid-template-columns 最稳妥，避免老式布局带来的高度塌陷、间隙错位问题。
常见错误：用 float: left 拼列，结果在 Safari 下列宽计算异常；或用 inline-block 加 vertical-align，导致列间基线对齐错乱、空格吃宽度。
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 自动适配列数，最小列宽 280px，最大均分剩余空间 - 每列设
overflow-y: auto，保证长列表可滚动而不撑高整页 - 列容器加
min-height: 60vh，防止空列塌缩看不见拖拽区 - 禁用
grid-gap改用padding控制列间距，避免 gap 在拖拽时干扰DragEvent坐标判断
给卡片加 draggable="true" 后必须拦截默认行为
HTML5 原生拖拽 API 看似简单，但不处理默认行为会导致：拖动瞬间页面文字被选中、图片被拖出浏览器、松手后卡片“消失”（其实是被浏览器当文件下载了）。
关键点在于所有拖拽相关事件都必须调用 event.preventDefault()，否则 drop 事件根本不会触发。
- 在卡片上监听
dragstart，设event.dataTransfer.setData('text/plain', cardId)，只传 ID，别传 DOM 节点 - 列容器监听
dragover，必须立刻event.preventDefault()，否则drop不会触发 - 列容器监听
drop，用event.dataTransfer.getData('text/plain')拿到 ID，再用appendChild或insertBefore移动真实 DOM 节点 - 别在
dragenter里做 heavy work（比如重排卡片），它可能高频触发，造成卡顿
跨列拖拽时，目标列的 drop 事件坐标不可靠
原生 drop 事件只告诉你“落在哪个元素上”，但不知道该插在目标列的第几个位置——尤其当列内卡片高度不一时，靠 clientY 算序号容易误判。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
更可靠的做法是监听 dragover 时动态插入一个占位符（div.placeholder），并实时调整它的位置，让用户看到“将插入此处”的视觉反馈。
- 在
dragover中，遍历目标列内所有卡片，用getBoundingClientRect()比较event.clientY和每个卡片中线，决定 placeholder 插入点 - placeholder 必须设
pointer-events: none，否则会拦截后续拖拽事件 - 每次
dragover触发前先移除旧 placeholder，避免残留多个 - 松手（
drop）后立即移除 placeholder，再执行真实 DOM 移动
移动端 Safari 的拖拽支持几乎为零，必须降级为触摸模拟
iOS / iPadOS 的 Safari 完全不支持 draggable="true" 和相关事件，连 dragstart 都不会触发。强行依赖原生 API 会导致整个功能在 iPhone 上完全不可用。
必须单独检测 'ontouchstart' in window 或 navigator.maxTouchPoints > 0，启用基于 touchstart/touchmove/touchend 的模拟逻辑。
- 用
touchstart记录起始卡片和初始触摸点，禁用默认行为（event.preventDefault()）防止滚动 - 用
touchmove动态更新卡片位置（transform: translate3d），并实时计算当前列和插入点 - 用
touchend触发真实移动，此时需手动触发一次drop类似逻辑 - 注意 iOS 的
touchmove默认会触发页面滚动，务必在绑定时加{ passive: false }
拖拽看似只是“拖过去”，但跨浏览器兼容、跨设备交互、视觉反馈与 DOM 同步这三块，任一环节漏掉细节，用户就会觉得“卡”“不准”“点了没反应”。尤其是 placeholder 的插入时机和 touch 事件的 passive 设置，线上最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
