拖拽选取数据更自由，JavaScript 实现 Excel 表格拖拽选取功能

2024-02-09 23:30:04

1. 准备工作

在开始实现拖拽选取功能之前，我们需要先准备一些东西：

一个 HTML 表格元素，其中包含要选取的数据
一个 JavaScript 文件，用于编写实现拖拽选取功能的代码
一个 CSS 文件，用于设置表格的样式

2. 编写 JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现拖拽选取功能。

// 获取表格元素
var table = document.getElementById("table");

// 为表格添加鼠标事件监听器
table.addEventListener("mousedown", function(e) {
  // 检查鼠标是否按下左键
  if (e.button === 0) {
    // 获取鼠标点击的位置
    var startX = e.clientX;
    var startY = e.clientY;

    // 创建一个新的元素，用于显示选取的区域
    var selection = document.createElement("div");
    selection.classList.add("selection");

    // 将选取的区域添加到表格中
    table.appendChild(selection);

    // 为鼠标移动事件添加监听器
    document.addEventListener("mousemove", function(e) {
      // 获取鼠标移动的位置
      var endX = e.clientX;
      var endY = e.clientY;

      // 计算选取的区域的大小
      var width = endX - startX;
      var height = endY - startY;

      // 设置选取的区域的大小
      selection.style.width = width + "px";
      selection.style.height = height + "px";

      // 设置选取的区域的位置
      selection.style.left = startX + "px";
      selection.style.top = startY + "px";
    });

    // 为鼠标抬起事件添加监听器
    document.addEventListener("mouseup", function() {
      // 移除鼠标移动事件监听器
      document.removeEventListener("mousemove");

      // 移除选取的区域
      table.removeChild(selection);
    });
  }
});

3. 应用 CSS 样式

最后，我们需要应用 CSS 样式来设置表格的样式。

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 5px;
}

.selection {
  position: absolute;
  border: 1px dashed black;
  background-color: rgba(0, 0, 0, 0.5);
}