如何实现点击按钮后通过鼠标点击指定div添加行块

核心思路 #

• 点击「Add Row +」按钮时，仅创建行节点并暂存，不直接添加到默认容器
• 为所有可容纳行的容器（包括初始的contentBox、已创建的bloc行块、bloc--inner列块）添加点击事件，当存在暂存的行节点时，将其追加到点击的容器中
• 保留原有的列添加逻辑，同时确保列仅能添加到行块内
• 添加视觉提示，让用户清晰感知当前处于「待选择容器」状态

修改后的完整代码 #

JavaScript

var i = 0;
var j = 0;

let newRowNode = null;
let newColNode = null;

// 给初始容器绑定点击事件
document.getElementById('contentBox').addEventListener('click', handleContainerClick);

function addRow() {
  // 创建行节点但不直接插入DOM
  const row = document.createElement('div');
  row.className = 'bloc';
  row.id = "b" + ++i;
  // 给新行绑定点击事件，支持后续嵌套添加
  row.addEventListener('click', handleContainerClick);
  
  newRowNode = row;
  // 给所有可容纳行的容器添加视觉提示
  document.querySelectorAll('.container, .bloc, .bloc--inner').forEach(el => {
    el.classList.add('pending-add');
  });
}

function addCol() {
  const col = document.createElement('div');
  col.className = 'bloc--inner';
  col.id = "c" + ++j;
  // 给新列绑定点击事件，支持后续在行内嵌套添加
  col.addEventListener('click', handleContainerClick);
  
  newColNode = col;
  // 仅给行块添加视觉提示（列只能添加到行内）
  document.querySelectorAll('.bloc').forEach(el => {
    el.classList.add('pending-add');
  });
}

// 统一处理容器点击逻辑
function handleContainerClick(event) {
  event.stopPropagation();
  const target = event.currentTarget;

  // 处理行添加逻辑
  if (newRowNode) {
    target.appendChild(newRowNode);
    newRowNode = null;
  }
  // 处理列添加逻辑（仅允许添加到行块）
  else if (newColNode && target.classList.contains('bloc')) {
    target.appendChild(newColNode);
    newColNode = null;
  }

  // 移除所有容器的视觉提示状态
  document.querySelectorAll('.pending-add').forEach(el => {
    el.classList.remove('pending-add');
  });
}

CSS

在原有CSS代码末尾添加以下视觉提示样式：

/* 待添加状态的高亮提示 */
.pending-add {
  border-color: #2654d1 !important;
  background-color: rgba(38, 84, 209, 0.1) !important;
  cursor: pointer;
}

.pending-add:hover {
  border-color: #1a3a80 !important;
  background-color: rgba(38, 84, 209, 0.15) !important;
}

HTML

保持原有结构不变：

<div class="wrapper">
  <div class="main-content">
    <div class="header">
      <button class="add-row" onclick="addRow()">Add Row +</button>
      <button class="add-column" onclick="addCol()">Add Column +</button>
    </div>
    <div class="content-box" id="main-container">
      <div class="container" id="contentBox">

      </div>
    </div>
  </div>
</div>

功能说明 #

1. 添加行：点击「Add Row +」后，所有可容纳行的容器会高亮，点击任意目标容器，行块将被追加到该容器内
2. 添加列：点击「Add Column +」后，所有行块会高亮，点击任意行块，列块将被追加到该行内
3. 嵌套支持：新创建的行和列都可作为父容器，继续添加行或列（列内仅支持添加行）

内容的提问来源于stack exchange，提问作者unnikrishnan pj