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

0.先给大家看看效果：

1.创建一个index.html文件

  
  
  
    ul{list-style: none}
    li{width:200px;margin:10px;float:left;height: 100px;background: #ccc;border: 1px solid #fff;}
    .selected{border: 1px solid red}
  
  


   

     

     

     

     

     

     

     

     

     

     

     

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

以上所述是小编给大家介绍的js/jq仿window文件夹框选操作插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！