使用mousemove事件在网格中创建矩形

<div class="grid-container"></div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 定义网格列数 */
  grid-template-rows: repeat(10, 1fr); /* 定义网格行数 */
  gap: 1px; /* 定义网格间隔 */
  width: 500px; /* 定义网格容器宽度 */
  height: 500px; /* 定义网格容器高度 */
  border: 1px solid #000; /* 定义网格容器边框 */
}

const gridContainer = document.querySelector('.grid-container');

gridContainer.addEventListener('mousemove', function(event) {
  const rect = document.createElement('div'); /* 创建矩形元素 */
  rect.classList.add('rectangle'); /* 添加矩形样式类名 */
  
  const cellWidth = gridContainer.offsetWidth / 10; /* 计算每个网格单元的宽度 */
  const cellHeight = gridContainer.offsetHeight / 10; /* 计算每个网格单元的高度 */
  
  const colIndex = Math.floor(event.offsetX / cellWidth); /* 计算鼠标所在列索引 */
  const rowIndex = Math.floor(event.offsetY / cellHeight); /* 计算鼠标所在行索引 */
  
  rect.style.gridColumn = `${colIndex + 1} / span 1`; /* 设置矩形所在列位置 */
  rect.style.gridRow = `${rowIndex + 1} / span 1`; /* 设置矩形所在行位置 */
  
  gridContainer.appendChild(rect); /* 将矩形添加到网格容器中 */
});

.rectangle {
  background-color: #ff0000; /* 设置矩形背景颜色 */
  border: 1px solid #000; /* 设置矩形边框 */
}