如何移除SpreadSheetGear拖拽时源到目标单元格区域的默认边框？

场景 #

选中某单元格，按住鼠标左键拖动至另一单元格时，所有经过的单元格边框都会发生变化。

预期行为 #

拖拽单元格时不需要默认的单元格边框，仅保留源单元格和目标单元格的边框（可通过修改边框属性实现）。

解决方案 #

核心思路是在拖拽过程中仅为源单元格和当前目标单元格保留自定义边框，实时重置中间经过单元格的边框为默认状态，具体实现步骤如下：

1. 绑定拖拽相关事件 #

需要监听三类关键事件：

• mousedown：记录拖拽的源单元格，标记拖拽状态
• mousemove：实时更新目标单元格，同时清理中间单元格的临时边框样式
• mouseup：结束拖拽，清除所有临时标记与样式

2. 样式与逻辑配合 #

通过CSS定义源单元格、目标单元格的专属边框样式，再用JS控制样式的添加与移除：

• 鼠标按下时，给源单元格添加专属边框类
• 拖拽过程中，先清除所有单元格的拖拽相关样式，再重新为源单元格和当前目标单元格添加对应样式
• 鼠标松开时，清空所有临时样式与状态标记

示例代码（HTML+JS+CSS） #

CSS 样式定义

/* 默认单元格样式 */
td {
  border: 1px solid #ccc;
  padding: 8px;
  cursor: pointer;
}

/* 源单元格边框样式 */
.source-cell {
  border: 2px solid #2196F3;
}

/* 目标单元格边框样式 */
.target-cell {
  border: 2px solid #4CAF50;
}

JavaScript 事件逻辑

<table id="dragTable">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

<script>
const table = document.getElementById('dragTable');
let sourceCell = null;
let isDragging = false;

// 监听鼠标按下，标记源单元格与拖拽状态
table.addEventListener('mousedown', (e) => {
  if (e.target.tagName === 'TD') {
    isDragging = true;
    sourceCell = e.target;
    sourceCell.classList.add('source-cell');
  }
});

// 监听鼠标移动，实时更新边框样式
table.addEventListener('mousemove', (e) => {
  if (!isDragging || !sourceCell) return;
  
  // 清除所有单元格的拖拽样式
  document.querySelectorAll('td').forEach(cell => {
    cell.classList.remove('source-cell', 'target-cell');
  });
  
  // 恢复源单元格样式
  sourceCell.classList.add('source-cell');
  
  // 为当前目标单元格添加样式
  if (e.target.tagName === 'TD') {
    e.target.classList.add('target-cell');
  }
});

// 监听鼠标松开，结束拖拽并清理状态
document.addEventListener('mouseup', () => {
  isDragging = false;
  document.querySelectorAll('td').forEach(cell => {
    cell.classList.remove('source-cell', 'target-cell');
  });
  sourceCell = null;
});
</script>

关键说明 #

• 采用事件委托监听表格事件，避免为每个单元格单独绑定，提升性能
• 拖拽过程中实时重置所有单元格样式，确保只有源和目标单元格保留自定义边框
• 可根据需求调整source-cell和target-cell类的边框颜色、粗细等属性

内容的提问来源于stack exchange，提问作者Khalid Farhan