头像

jQuery框选和点击选中div块代码

来源:http://www.sucaihuo.com/js/3461 素材火管理员 2018-02-08 21:28浏览(386) 收藏

jQuery框选和点击选中div块代码,类似windows系统选择文件效果的鼠标拖动选中div块,还可以点击全选反选按钮进行选择。
jQuery框选和点击选中div块代码
分类:悬浮层/弹出层 > 拖动 难易:初级

程序员,你不是一个人;网站开发QQ群:436471830,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 1 下载资源 下载积分: 10 积分

js代码

<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 = true;
                    //  创建选框节点
                    var $selectBoxDashed = $('<div class="select-box-dashed"></div>');
                    $('body').append($selectBoxDashed);
                    //  设置选框的初始位置
                    var startX = eventDown.x || eventDown.clientX;
                    var startY = eventDown.y || eventDown.clientY;
                    $selectBoxDashed.css({
                        left: startX,
                        top : startY
                    });
                    //  根据鼠标移动,设置选框宽高
                    var _x = null;
                    var _y = null;
                    //  清除事件冒泡、捕获
                    clearBubble(eventDown);
                    //  监听鼠标移动事件
                    $(selector).on('mousemove', function(eventMove) {
                        //  设置选框可见
                        $selectBoxDashed.css('display', 'block');
                        //  根据鼠标移动,设置选框的位置、宽高
                        _x = eventMove.x || eventMove.clientX;
                        _y = eventMove.y || eventMove.clientY;
                        //  暂存选框的位置及宽高,用于将 select-item 选中
                        var _left   = Math.min(_x, startX);
                        var _top    = Math.min(_y, startY);
                        var _width  = Math.abs(_x - startX);
                        var _height = Math.abs(_y - startY);
                        $selectBoxDashed.css({
                            left  : _left,
                            top   : _top,
                            width : _width,
                            height: _height
                        });
                        //  遍历容器中的选项,进行选中操作
                        $(selector).find('.select-item').each(function() {
                            var $item = $(this);
                            var itemX_pos = $item.prop('offsetWidth') + $item.prop('offsetLeft');
                            var itemY_pos = $item.prop('offsetHeight') + $item.prop('offsetTop');
                            //  判断 select-item 是否与选框有交集,添加选中的效果( temp-selected ,在事件 mouseup 之后将 temp-selected 替换为 selected)
                            var condition1 = itemX_pos > _left;
                            var condition2 = itemY_pos > _top;
                            var condition3 = $item.prop('offsetLeft') < (_left + _width);
                            var condition4 = $item.prop('offsetTop') < (_top + _height);
                            if (condition1 && condition2 && condition3 && condition4) {
                                $item.addClass('temp-selected');
                            } else {
                                $item.removeClass('temp-selected');
                            }
                        });
                        //  清除事件冒泡、捕获
                        clearBubble(eventMove);
                    });

                    $(document).on('mouseup', function() {
                        $(selector).off('mousemove');
                        $(selector)
                            .find('.select-item.temp-selected')
                            .removeClass('temp-selected')
                            .addClass('selected');
                        $selectBoxDashed.remove();

                        if (selectCallback) {
                            selectCallback();
                        }
                    });
                })
                //  点选切换选中事件
                .on('click', '.select-item', function() {
                    if ($(this).hasClass('selected')) {
                        $(this).removeClass('selected');
                    } else {
                        $(this).addClass('selected');
                    }
                })
                //  点选全选全不选
                .on('click', '.toggle-all-btn', function() {
                    if ($(this).attr('data-all')) {
                        $(this).removeAttr('data-all');
                        $container.find('.select-item').removeClass('selected');
                    } else {
                        $(this).attr('data-all', 1);
                        $container.find('.select-item').addClass('selected');
                    }
                });
        };

        initSelectBox('.container');
    </script>
评论3
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 板凳
    02-28 08:02
    笑***生
    写的不错,很实用,点赞
  • 头像 椅子
    02-09 07:59
    不***火
    这不错的样子,先留着
  • 头像 沙发
    02-09 01:22
    Ev***ng
    非常不错的特效,可以下载来用用
1 2