本文详解如何通过 javascript 自动将左侧蓝色文本块（如 "h1 text"）按其前缀字母与数字精准移入右侧 12×n 网格中对应位置（h 行第 1 列、g 行第 2 列等），无需手动绑定 id，仅依赖语义化文本解析与 css 计数器生成的行列坐标。
本文详解如何通过 javascript 自动将左侧蓝色文本块（如 "h1 text"）按其前缀字母与数字精准移入右侧 12×n 网格中对应位置（h 行第 1 列、g 行第 2 列等），无需手动绑定 id，仅依赖语义化文本解析与 css 计数器生成的行列坐标。
在构建交互式网格布局（如教学排课表、乐谱格、棋盘标注系统）时，常需将带语义标识的文本（如 "H1 Text"、"G3 Text"）批量、有序地填入对应网格单元。本方案提供一种免 ID、纯逻辑驱动的自动化移动方案，核心在于：从文本内容中提取行列信息，并映射到 CSS counter 渲染出的实际网格坐标。
✅ 实现原理：文本解析 + 网格坐标计算
右侧网格使用 CSS counter-increment 自动生成行列标签（A/B/C… 表示行，1/2/3… 表示列）。虽然 DOM 中未显式写入 id="H1"，但视觉上每个 .item 元素已具备唯一行列坐标。我们利用该规律：
- 行号计算：取文本首字母（如 "H"），转为 ASCII 码后减去 'A' 的 ASCII（65），得到 0-based 行索引：'H'.charCodeAt(0) - 65 === 7 → 对应第 8 行（即 H 行，在 0-based 索引中为第 7 行）。
- 列号计算：取文本第二个字符（如 "1"），转为数字后减 1 得到 0-based 列索引：parseInt("1") - 1 === 0。
- 目标元素定位：网格每行 12 列，因此目标 .content 元素索引为 row * 12 + column。
? 注意：CSS 中 nth-of-type(12n+1) 触发行计数器，意味着第 1、13、25… 个 .item 是每行首列（A1, B1, C1…），因此行号 row 直接对应 counter(alphaCount) 值（A=0, B=1, …, H=7）。
✅ 核心代码实现
function moveText() {
// 遍历所有可拖拽文本节点（.words）
$('.words').each((index, item) => {
const text = item.textContent.trim();
if (!text) return;
// 提取首字母（行）和首个数字（列）
const match = text.match(/^([A-Z])(\d+)/);
if (!match) {
console.warn(`跳过无法解析的文本: "${text}"`);
return;
}
const rowLetter = match[1]; // 'H'
const colNumber = parseInt(match[2], 10); // 1
// 计算 0-based 行列索引
const row = rowLetter.charCodeAt(0) - 65; // H → 7
const column = colNumber - 1; // 1 → 0
// 定位目标 .content 元素（每行 12 列）
const targetIndex = row * 12 + column;
const targetContent = document.querySelectorAll('.content')[targetIndex];
if (targetContent) {
// 移动 DOM 节点（清空原位置，插入目标）
item.remove();
targetContent.appendChild(item);
} else {
console.warn(`目标位置超出网格范围: ${rowLetter}${colNumber} → 索引 ${targetIndex}`);
}
});
}⚠️ 关键注意事项
- 文本格式强约束：输入必须严格匹配 /^[A-Z]\d+/（如 "H1"、"G12"），否则跳过。实际使用中建议对 .words 内容做标准化（如只保留首字母+首个数字）。
- 网格尺寸需匹配：当前 CSS 设 grid-template-columns: repeat(12, 1fr)，故每行固定 12 列。若调整列数（如 8 或 16），需同步修改 targetIndex = row * COL_COUNT + column 中的 COL_COUNT。
- 避免重复移动：函数执行后，.words 已脱离原 <div data-id="X"> 容器。若需支持多次点击重置，应在 moveText() 开头先清理已有内容（如 $('.content').empty()）。
- 性能优化：对于大量文本（>50 条），建议用 documentFragment 批量操作，或添加防抖。
✅ 总结
本方案摒弃了为每个网格单元硬编码 id 的繁琐方式，转而利用CSS 计数器生成的视觉坐标与文本语义的自然映射，以极简逻辑实现精准填充。它轻量、可维护、符合语义化设计原则，特别适合动态生成的网格场景。只需确保文本前缀符合 [大写字母][数字] 格式，即可开箱即用。
