js/jq仿window文件夹框选操作插件

0.先给大家看看效果：

1.创建一个index.html文件

　　

2.引入插件areaSelect.js

    (function($){
        $.fn.areaSelect=function(option){
            var opt={}
            opt=$.extend(opt,option);
            var _this=$(this);
            _this.on('mousedown',function (e) {
                console.log(_this)
                _this.find('li').removeClass('selected');
                var startTop=e.pageY;
                var startLeft=e.pageX;
                var endTop,endLeft;
                var selectBox=$('
');
                $('body').append(selectBox);
                selectBox.css({'position':'absolute', 'top':startTop+'px', 'left':startLeft+'px', 'background':'rgba(255,106,23,0.3)', 'transition':'all 0s', 'width':0, 'height':0, 'z-index':10})
                $(document).on('mousemove',function (e) {
                    e.preventDefault();
                    endTop=e.pageY;
                    endLeft=e.pageX;
                    if(e.pageY-startTop>0 && e.pageX-startLeft>0){
                        var height=e.pageY-startTop;
                        var width=e.pageX-startLeft;
                        selectBox.css({
                            'width':width+'px',
                            'height':height+'px'
                        })
                    }else if(e.pageY-startTop<0 && e.pageX-startLeft<0) {
                        var height=-(e.pageY-startTop);
                        var width=-(e.pageX-startLeft);
                        selectBox.css({
                            'width':width+'px',
                            'height':height+'px',
                            'top':e.pageY+'px',
                            'left':e.pageX+'px'
                        })
                    }else if(e.pageY-startTop>0 && e.pageX-startLeft<0) {
                        var height=(e.pageY-startTop);
                        var width=-(e.pageX-startLeft);
                        selectBox.css({
                            'width':width+'px',
                            'height':height+'px',
                            'top':startTop+'px',
                            'left':e.pageX+'px'
                        })
                    }else if(e.pageY-startTop<0 && e.pageX-startLeft>0) {
                        var height=-(e.pageY-startTop);
                        var width=(e.pageX-startLeft);
                        selectBox.css({
                            'width':width+'px',
                            'height':height+'px',
                            'top':e.pageY+'px',
                            'left':startLeft+'px'
                        })
                    }
                    _this.find('>li').each(function () {
                        if((startLeft<$(this).offset().left+$(this).width() && $(this).offset().leftstartTop && (e.pageY-startTop>0 && e.pageX-startLeft>0)) ||
                            (endLeft<$(this).offset().left+$(this).width() && $(this).offset().leftendTop && (e.pageY-startTop<0 && e.pageX-startLeft<0)) ||
                            (endLeft<$(this).offset().left+$(this).width() && $(this).offset().leftstartTop && (e.pageY-startTop>0 && e.pageX-startLeft<0)) ||
                            (startLeft<$(this).offset().left+$(this).width() && $(this).offset().leftendTop && (e.pageY-startTop<0 && e.pageX-startLeft>0)) ){
                            $(this).addClass('selected');
                            return;
                        }else {
                            $(this).removeClass('selected');
                        }
                    })
                })
                $(document).on('mouseup',function () {
//                         if(opt.do) opt.do();  执行毁掉函数或者，钩子函数
                    $('#select-box').remove();
                    $(document).unbind('mousemove');
                })
            })
        }
    })(jQuery)

　　

3.调用插件

在index.html的body最下面添加下面代码：

　　

打开index.html查看效果吧！！！！

 

 个人博客 ：很多好用的 npm 包 ， 可以看看  https://gilea.cn/