jquery实现一个拖动框选多选效果代码-html代码-BFW代码库

jquery实现一个拖动框选多选效果代码

代码语言：html

所属分类：拖放

代码描述：jquery实现一个拖动框选多选效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <body>

        <div class="container select-box-container">
            <div class="toggle-all-container">
                <a href="javascript:;" class="btn btn-md btn-default toggle-all-btn">全选/取消全选</a>
            </div>
            <div class="fileDiv select-item">
                file1
            </div>
            <div class="fileDiv select-item">
                file2
            </div>
            <div class="fileDiv select-item">
                file3
            </div>
            <div class="fileDiv select-item">
                file4
            </div>
            <div class="fileDiv select-item">
                file5
            </div>
            <div class="fileDiv select-item">
                file6
            </div>
            <div class="fileDiv select-item">
                file7
            </div>
            <div class="fileDiv select-item">
                file8
            </div>
            <div class="fileDiv select-item">
                file9
            </div>
            <div class="fileDiv select-item">
                file10
            </div>
            <div class="fileDiv select-item">
                file11
            </div>
            <div class="fileDiv select-item">
                file12
            </div>
            <div class="fileDiv select-item">
                file13
            </div>
            <div class="fileDiv select-item">
                file14
            </div>
            <div class="fileDiv select-item">
                file15
            </div>
            <div class="fileDiv select-item">
                file16
            </div>
            <div class="fileDiv select-item">
                file17
            </div>
        </div>

        <div style="margin:20px 100px;">
            <h4>选中文件：</h4>
            <div id="data"></div>
        </div>

        <style>
            .container {
                padding: 20px;
                margin: 100px 100px 20px;
                border: 1px solid #ddd;
                text-align: center;
            }

            .select-box-container {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            .select-box-container .toggle-all-container {
                margin-bottom: 25px;
            }

            .select-item {
                display: inline-block;
                width: 100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                font-size: 12px;
                border: 1px solid #ccc;
                margin-right: 10px;
                margin-bottom: 10px;
                cursor: pointer;
            }
            .select-item.selected,
            .select-item.temp-selected {
                background-color: #ddd;
            }
            .select-box-dashed {
                position: absolute;
                display: none;
                width: 0px;
                height: 0px;
                padding: 0px;
                margin: 0px;
                border: 1px dashed #0099ff;
                background-color: #c3d5ed;
                opacity: 0.5;
                filter: alpha(opacity=50);
                font-size: 0px;
                z-index: 99999;
            }
        </style>

        <script>
            var initSelectBox = function(selector, selectCallback) {
                function clearBubble(e) {
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    } else {
                        e.cancelBubble = true;
                    }

                    if (e.preventDefault) {
                        e.preventDefault();
                    } else {
                        e.returnValue = false;
                    }
                }
                var $container = $(selector);
                //  框选事件
                $container
                .on('mousedown', function(eventDown) {
                    //  设置选择的标识
                    var isSelect =.........完整代码请登录后点击上方下载按钮下载查看