html无原生swimlane元素，需用语义化标签（如）配合flexbox/grid布局、视觉样式及sortablejs实现可拖拽泳道；关键包括横向滚动设置、group权限配置、touch-action精准应用及数据隔离。
HTML 中没有原生 swimlane 元素，必须用 CSS 布局模拟
浏览器不识别 swimlane 这个标签，直接写 <swimlane></swimlane> 不会渲染出任何分组效果，甚至可能被当成未知元素忽略。真正的泳道（swimlane）是看板（Kanban）UI 的视觉概念：垂直或水平排列的、带标题的列容器，每列内可拖拽卡片。实现它靠的是语义化结构 + Flexbox/Grid + 边框/阴影等视觉强化。
- 推荐用
<section></section>或<div role="region" aria-label="待处理"> 包裹每条泳道，兼顾语义与可访问性 <li>泳道标题建议用 <code><h3></h3>，不要用<div class="title">，否则屏幕阅读器无法感知层级 <li>避免嵌套过深：泳道 → 卡片列表 → 卡片，三层足够，再深会影响拖拽库（如 SortableJS）的事件捕获</li> <h3>用 Flexbox 实现横向泳道（最常用）时，<code>flex-wrap: nowrap和overflow-x: auto必须配合横向滚动是响应式看板的关键——否则小屏下泳道会被强行压缩，卡片堆叠变形。只设
display: flex不够，必须控制换行和溢出行为。-
container元素需设display: flex+flex-wrap: nowrap，禁止泳道折行 -
container同时加overflow-x: auto和-webkit-overflow-scrolling: touch（iOS 滚动更顺滑） - 每条泳道（
swimlane）设固定最小宽度，如min-width: 280px，防止内容少时过度收缩 - 别忘了给泳道加
margin-right: 16px，但最后一项用:last-child { margin-right: 0 }清除，否则滚动条外留白
SortableJS 拖拽进泳道时，
group配置漏掉pull: 'clone'或put: true就会失败很多卡在“能拖不能放”——不是 HTML 结构问题，而是 SortableJS 的
group选项没对齐。泳道之间允许互相拖入卡片，必须双向声明权限。- 所有泳道的 Sortable 实例都要配相同
group名，例如group: 'kanban' - 每个实例的
group对象里，put: true表示“允许其他泳道的卡片放进来”，pull: true表示“允许自己拖出卡片”；如果想支持复制（比如从“待办”拖到“进行中”后原处还留一份），则设pull: 'clone' - 漏掉
put: true是最常见错误，现象是拖到目标泳道时光标变禁止符号（?），松手无反应 - 初始化顺序无关紧要，但所有泳道 DOM 必须在 JS 执行前已存在，动态插入后要手动调用
sortable.option('group', ...)更新
移动端触摸拖拽卡顿？
touch-action: none加错位置会导致整个页面无法滚动在泳道或卡片上盲目加
touch-action: none是为了禁用浏览器默认触摸行为（如双指缩放、长按选中），但它会同时禁用原生滚动——结果是横向泳道滚不动了。- 只对**可拖拽的卡片元素**（如
<article class="card"></article>）设touch-action: none，不是对泳道容器 - 如果卡片内有可点击区域（如按钮、链接），需额外加
touch-action: manipulation到对应子元素，否则点击失效 - 真机调试时，用 Chrome DevTools 的 “Rendering > Paint flashing” 查看是否因
touch-action导致大面积重绘，这是卡顿根源之一
<div class="board" style="display: flex; flex-wrap: nowrap; overflow-x: auto;"> <section class="swimlane" aria-labelledby="lane-1"><h3 id="lane-1">待处理</h3> <ul class="card-list"> <li class="card" draggable="true">需求评审</li> </ul></section><section class="swimlane"><h3>进行中</h3> <ul class="card-list"></ul></section> </div>泳道之间逻辑隔离比视觉隔离更关键：每条泳道的数据状态要独立管理，别共用一个数组再靠索引切片——后续增删泳道时极易出 bug。 -
