欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-22 10:31:38
0.先给大家看看效果: 1.创建一个index.html文件 ...

0.先给大家看看效果:

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

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查看效果吧!!!!

以上所述是小编给大家介绍的js/jq仿window文件夹框选操作插件,希望对大家有所帮助