JS实现鼠标框选效果完整实例

2023年5月28日上午11:22 • JavaScript

下面是详细的“JS实现鼠标框选效果完整实例”的完整攻略，包含两条示例说明。

概述

鼠标框选效果是一种常见的 Web 应用程序 UI 设计。具体来说，通过 JavaScript 实现鼠标框选效果，可以让用户在多个元素中选择他们想要的元素。

实现鼠标框选效果的核心在于：鼠标按下之后从鼠标按下位置到鼠标移动位置之间的所有元素会被高亮标记，鼠标释放后，所有被标记的元素应该被选中。

实现步骤

添加一个鼠标按下事件监听器
- 当鼠标按下时，需要记录开始选取的起点位置
- 开始选取后可以清除所有的选中状态
添加一个鼠标移动事件监听器
- 记录当前移动位置
- 计算选择框的位置和大小
- 找到位于选择框内的所有元素
- 将这些元素标记为选中状态
添加一个鼠标释放事件监听器
- 清除所有选择框和选择状态

代码实现

下面，我们提供一个完整的例子来演示如何使用 JavaScript 实现鼠标框选效果的实战应用。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JS 实现鼠标框选效果</title>
    <style>
        .box {
            width: 100px;
            height: 50px;
            background-color: #ccc;
            border: 1px solid #000;
            margin: 10px;
            float: left;
            position: relative;
        }

        .box.selected {
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

    <script>
        var isMouseDown = false;
        var isMouseMove = false;
        var container = document.body;
        var selection = document.createElement('div');
        var oriX, oriY;
        var curX, curY;
        var offsetX = container.offsetLeft,
            offsetY = container.offsetTop;
        var boxes = document.querySelectorAll('.box');

        selection.style.cssText = 'border: 1px dashed #000; position: absolute; background-color: #eee; opacity: 0.5; z-index: 1000;';

        container.addEventListener('mousedown', function (e) {
            isMouseDown = true;
            isMouseMove = false;
            oriX = e.clientX - offsetX;
            oriY = e.clientY - offsetY;

            selection.style.left = oriX + 'px';
            selection.style.top = oriY + 'px';
            selection.style.width = '0px';
            selection.style.height = '0px';
            container.appendChild(selection);

            boxes.forEach(function (item) {
                item.classList.remove('selected');
            });
        });

        container.addEventListener('mousemove', function (e) {
            if (!isMouseDown) {
                return false;
            } else {
                isMouseMove = true;
                curX = e.clientX - offsetX;
                curY = e.clientY - offsetY;

                var minWidth = Math.min(oriX, curX);
                var minHeight = Math.min(oriY, curY);
                var maxWidth = Math.abs(curX - oriX);
                var maxHeight = Math.abs(curY - oriY);

                selection.style.left = minWidth + 'px';
                selection.style.top = minHeight + 'px';
                selection.style.width = maxWidth + 'px';
                selection.style.height = maxHeight + 'px';

                for (var i = 0; i < boxes.length; i++) {
                    var boxX = boxes[i].offsetLeft + boxes[i].offsetWidth,
                        boxY = boxes[i].offsetTop + boxes[i].offsetHeight;
                    if (boxX > minWidth && boxY > minHeight && boxes[i].offsetLeft < (minWidth + maxWidth) && boxes[i].offsetTop < (minHeight + maxHeight)) {
                        boxes[i].classList.add('selected');
                    } else {
                        boxes[i].classList.remove('selected');
                    }
                }
            }
        });

        container.addEventListener('mouseup', function (e) {
            isMouseDown = false;
            if (selection.parentNode === container) {
                container.removeChild(selection);
            }
            if (isMouseMove === false) {
                boxes.forEach(function (item) {
                    item.classList.remove('selected');
                });
            }
        });
    </script>
</body>

</html>

以上代码用纯 JavaScript 实现了简单的鼠标框选效果，用户可以在网页上单击鼠标左键并拖动，就可以选择指定区域内的元素。同时，在本例中，还实现了鼠标框选状态切换的功能，即当用户框选一块区域，框选区域中包含的元素会被添加选中状态，并且选取出来进行高亮标记。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现鼠标框选效果完整实例 - Python技术站