html5实现鼠标框选

在 HTML5 中，可以使用鼠标事件和 CSS 样式来实现鼠标框选功能。以下是一种实现方式：

1. 在 HTML 文件中添加一个容器元素，用于展示需要框选的内容，例如一个列表或表格。

2. 在 CSS 文件中为容器元素添加样式，例如设置容器为相对定位，方便后续绝对定位子元素。

3. 使用 JavaScript 监听容器元素的鼠标事件，如 mousedown、mousemove 和 mouseup。

4. 在 mousedown 事件中记录鼠标的初始位置，并创建一个用于框选的 div 元素，并设置其初始位置和样式。

5. 在 mousemove 事件中更新框选 div 元素的位置和大小，根据鼠标移动的距离和方向计算出 div 的宽度和高度，并根据鼠标的位置确定 div 的左上角坐标。

6. 在 mouseup 事件中结束框选操作，移除框选 div 元素，并根据选中的内容进行相应的操作，例如高亮选中的行或列。

下面是一个简单的示例代码，可以实现在一个 ul 列表中进行鼠标框选：

<style>
    .container {
        position: relative;
    }
    .selection {
        position: absolute;
        background-color: rgba(0,0,0,0.2);
        border: 1px dashed black;
        pointer-events: none;
    }
</style>

<div class="container">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>

<script>
    const container = document.querySelector('.container');
    let startX, startY;
    let selection = null;

    container.addEventListener('mousedown', e => {
        startX = e.clientX;
        startY = e.clientY;

        selection = document.createElement('div');
        selection.classList.add('selection');
        container.appendChild(selection);
    });

    container.addEventListener('mousemove', e => {
        if (!selection) return;

        const currentX = e.clientX;
        const currentY = e.clientY;

        const minX = Math.min(currentX, startX);
        const minY = Math.min(currentY, startY);
        const maxX = Math.max(currentX, startX);
        const maxY = Math.max(currentY, startY);

        const width = maxX - minX;
        const height = maxY - minY;

        selection.style.left = `${minX}px`;
        selection.style.top = `${minY}px`;
        selection.style.width = `${width}px`;
        selection.style.height = `${height}px`;
    });

    container.addEventListener('mouseup', e => {
        if (!selection) return;

        container.removeChild(selection);
        selection = null;

        const items = document.querySelectorAll('li');
        items.forEach(item => {
            const rect = item.getBoundingClientRect();
            const isSelected = (
                rect.left >= startX &&
                rect.top >= startY &&
                rect.right <= e.clientX &&
                rect.bottom <= e.clientY
            );
            if (isSelected) {
                item.style.backgroundColor = 'yellow';
            } else {
                item.style.backgroundColor = '';
            }
        });
    });
</script>