js实现鼠标框选效果

香辣鱼干

已于 2024-05-23 15:18:44 修改

阅读量297

点赞数 6

分类专栏： js 文章标签： javascript 前端 html

于 2024-05-22 11:09:24 首次发布

本文链接：https://blog.csdn.net/qiaolezi787/article/details/139114835

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>

<head>
    <meta charset="utf-8">
    <title>js实现鼠标框选效果</title>
</head>

<style>
    body {
        padding: 100px;
    }

    .fileDiv {
        float: left;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 12px;
        border: 1px solid #ccc;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .seled {
        border: 1px solid red;
        background-color: #D6DFF7;
    }

    h3 {
        text-align: center;
        padding-bottom: 50px
    }
</style>

<script type="text/javascript">

    (function () {

        document.onmousedown = function () {

            var selList = [];

            var fileNodes = document.getElementsByTagName("div");

            for (var i = 0; i < fileNodes.length; i++) {

                if (fileNodes[i].className.indexOf("fileDiv") != -1) {

                    fileNodes[i].className = "fileDiv";

                    selList.push(fileNodes[i]);

                }

            }

            var isSelect = true;

            var evt = window.event || arguments[0];

            var startX = (evt.x || evt.clientX);

            var startY = (evt.y || evt.clientY);

            var selDiv = document.createElement("div");

            selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";

            selDiv.id = "selectDiv";

            document.body.appendChild(selDiv);

            selDiv.style.left = startX + "px";

            selDiv.style.top = startY + "px";

            var _x = null;

            var _y = null;

            clearEventBubble(evt);

            document.onmousemove = function (ee) {

                evt = ee

                if (isSelect) {

                    if (selDiv.style.display == "none") {

                        selDiv.style.display = "";

                    }

                    _x = (evt.x || evt.clientX);

                    _y = (evt.y || evt.clientY);

                    selDiv.style.left = Math.min(_x, startX) + "px";

                    selDiv.style.top = Math.min(_y, startY) + "px";

                    selDiv.style.width = Math.abs(_x - startX) + "px";

                    selDiv.style.height = Math.abs(_y - startY) + "px";

                    // ---------------- 关键算法 ---------------------  

                    var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;

                    var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;

                    for (var i = 0; i < selList.length; i++) {

                        var sl = selList[i].offsetWidth + selList[i].offsetLeft;

                        var st = selList[i].offsetHeight + selList[i].offsetTop;

                        if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) {
                            console.log('不存在');
                            if (selList[i].className.indexOf("seled") == -1) {

                                selList[i].className = selList[i].className + " seled";

                            }

                        } else {

                            if (selList[i].className.indexOf("seled") != -1) {

                                selList[i].className = "fileDiv";

                            }

                        }

                    }

                }

                clearEventBubble(evt);

            }

            document.onmouseup = function () {

                isSelect = false;

                if (selDiv) {

                    document.body.removeChild(selDiv);

                    showSelDiv(selList);

                }

                selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;

            }

        }

    })();

    function clearEventBubble(evt) {

        if (evt.stopPropagation)

            evt.stopPropagation();

        else

            evt.cancelBubble = true;

        if (evt.preventDefault)

            evt.preventDefault();

        else

            evt.returnValue = false;

    }

    function showSelDiv(arr) {

        var count = 0;

        var selInfo = "";

        for (var i = 0; i < arr.length; i++) {

            if (arr[i].className.indexOf("seled") != -1) {

                count++;

                selInfo += arr[i].innerHTML + "\n";

            }

        }

        alert("共选择 " + count + " 个文件，分别是：\n" + selInfo);

    }

</script>

<body>
    <h3>按下鼠标左键不放，框选查看效果</h3>
    <div class="fileDiv">file1</div>

    <div class="fileDiv">file2</div>

    <div class="fileDiv">file3</div>

    <div class="fileDiv">file4</div>

    <div class="fileDiv">file5</div>

    <div class="fileDiv">file6</div>

    <div class="fileDiv">file7</div>

    <div class="fileDiv">file8</div>

    <div class="fileDiv">file9</div>
    <div class="fileDiv">file10</div>
    <div class="fileDiv">file11</div>
    <div class="fileDiv">file12</div>
    <div class="fileDiv">file13</div>
    <div class="fileDiv">file14</div>
    <div class="fileDiv">file15</div>
    <div class="fileDiv">file16</div>
    <div class="fileDiv">file17</div>

</body>

</html>