在前端开发中，表格是常见的组件之一。然而，表格的交互体验往往受限于原生的选择方式。本文将介绍如何通过拖动来选择表格中的单元格，从而改善用户体验。
实现思路
我们需要实现以下几个功能：
- 鼠标按下时记录起始坐标
- 鼠标移动时更新选择区域
- 鼠标松开时完成选择操作
记录起始坐标
首先，我们需要监听鼠标按下事件（mousedown）并记录当前鼠标位置。这里我们可以使用 event.clientX 和 event.clientY 来获取鼠标在页面上的坐标。
let startRow, startCol;
table.addEventListener('mousedown', (event) => {
startRow = getRowIndex(event.target);
startCol = getColumnIndex(event.target);
});更新选择区域
接着，我们需要监听鼠标移动事件（mousemove）并根据移动距离调整所选区域。这里我们需要用到 CSS 的 ::selection 伪类来生成选区样式。
table ::selection {
background-color: #b3d4fc;
}为了计算选择区域，我们需要知道当前鼠标所在的单元格。这里可以使用 document.elementFromPoint(x, y) 方法来获取指定坐标下的元素。
-- -------------------- ---- ------- --- ----------- ----------- ----------------------------------- ------- -- - -- --------- --- --------- -- -------- --- ---------- ------- ---------- - ---------------------------------------------------- ---------------- ---------- - ------------------------------------------------------- ---------------- ------------------------- --------- ----------- ------------ ---
getRowIndex 和 getColumnIndex 可以根据单元格元素获取其在表格中的行列坐标。
function getRowIndex(cell) {
return cell.parentNode.rowIndex;
}
function getColumnIndex(cell) {
return cell.cellIndex;
}最后，我们需要实现 updateSelection 函数来更新选择区域样式。这里我们需要遍历所有被选择的单元格并添加 selected 类名。
-- -------------------- ---- -------
-------- ------------------------- --------- ------- ------- -
----- ------ - ------------------ --------
----- ------ - ------------------ --------
----- ------ - ------------------ --------
----- ------ - ------------------ --------
--- ---- - - ------- - -- ------- ---- -
--- ---- - - ------- - -- ------- ---- -
-------------------------------------------------
-
-
-完成选择操作
最后，我们需要监听鼠标松开事件（mouseup）并清除所选区域。
-- -------------------- ---- -------
--------------------------------- -- -- -
-----------------
-------- - ----------
-------- - ----------
---
-------- ---------------- -
----- ------------- - ------------------------------------
---------------------------- -- -
----------------------------------
---
-示例代码
下面是一个完整的示例代码，其中 table 是一个 HTML 表格元素。
-- -------------------- ---- -------
-------
----
------------
------------
------------
-----
----
------------
------------
------------
-----
----
------------
------------
------------
-----
--------
-------
----- ----------- -
----------------- --------
-
--------- -
----------------- --------
-
--------
--------
----- ----- -
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------