js/jq仿window文件夹框选操作插件-阿里云开发者社区

开发者社区> 小结巴巴> 正文

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

简介: 0.先给大家看看效果: 1.创建一个index.html文件 Title ul{list-style: none} li{width:200px;margin:10px;float:left;height: 100px;background: #ccc;border: 1px solid #fff;} .
+关注继续查看

0.先给大家看看效果:

1.创建一个index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{list-style: none}
        li{width:200px;margin:10px;float:left;height: 100px;background: #ccc;border: 1px solid #fff;}
        .selected{border: 1px solid red}
    </style>
    <script src="./jquery-1.12.4.min.js"></script>
</head>
<body>

     <ul class='clearfix test' >
         <li><img src="" alt=""></li>
         <li><img src="" alt=""></li>
         <li><img src="" alt=""></li>
         <li><img src="" alt=""></li>
         <li><img src="" alt=""></li>
         <li><img src="" alt=""></li>
         <li><img src="" alt=""></li>
         <li><img src="" alt=""></li>
         <li><img src="" alt=""></li>
         <li><img src="" alt=""></li>
         <div style="clear: both"></div>
</ul>

</body>
</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=$('<div id="select-box"></div>');
                $('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().left<endLeft && $(this).offset().top<endTop && $(this).offset().top+$(this).height()>startTop && (e.pageY-startTop>0 && e.pageX-startLeft>0)) ||
                            (endLeft<$(this).offset().left+$(this).width() && $(this).offset().left<startLeft && $(this).offset().top<startTop && $(this).offset().top+$(this).height()>endTop && (e.pageY-startTop<0 && e.pageX-startLeft<0)) ||
                            (endLeft<$(this).offset().left+$(this).width() && $(this).offset().left<startLeft && $(this).offset().top<endTop && $(this).offset().top+$(this).height()>startTop && (e.pageY-startTop>0 && e.pageX-startLeft<0)) ||
                            (startLeft<$(this).offset().left+$(this).width() && $(this).offset().left<endLeft  && $(this).offset().top<startTop && $(this).offset().top+$(this).height()>endTop && (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最下面添加下面代码:

<script>

    $(function () {
        $('.test').areaSelect()
    })
</script>

  

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

 

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Flutter 56: 图解自定义 BubbleWidget 气泡插件
0 基础学习 Flutter,第五十六步:尝试一下自定义气泡插件!
2650 0
Chrome的插件扩展程序安装目录是什么?在哪个文件夹?
正常情况下,Chrome插件扩展程序的默认安装目录如下: 1.windows xp中chrome插件默认安装目录位置: C:\Documents and Settings\用户名\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions 2.
8047 0
js Tree - 树形菜单插件
   js Tree - 树形菜单       1)DTree是 JQuery 著名树形插件Dynatree的包装类,增加右键菜单,添加、删除、更新接口。 主页: http://www.boarsoft.com/cn/javascript/dtree/     2)jquery treeList widget这是一个利用jQuery UI Widget Factory创建的轻量级,可换肤树形列表控件。
1733 0
6个强大的JavaScript日期操作插件(翻译)
我们必须承认,JavaScript内建的Date方法实在是太基础了,远不够我们来处理日期。总有人会开发自己的JavaScript日期操作库,为何在能够使用已经开发并测试好的日期插件时还要再自己造个轮子呢。
590 0
+关注
小结巴巴
高级前端工程师,喜欢写一些总结和例子
78
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载