热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了jsjq仿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查看效果吧!!!!

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


推荐阅读
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文介绍了Java语言开发的远程教学系统,包括源代码、MySQL数据库配置以及相关文档,适用于计算机专业的毕业设计。系统支持远程调试,采用B/S架构,适合现代教育需求。 ... [详细]
  • 本文探讨了前端包管理器的核心功能,包括注册机制、文件存储、上传下载、以及依赖分析等关键特性,并介绍了几种流行的前端包管理工具。 ... [详细]
  • 本文详细介绍了使用JavaScript和jQuery进行页面加载初始化的方法,包括不同的实现方式及其应用场景,并探讨了两者在初始化过程中的主要区别。 ... [详细]
  • 本文详细解析了HTML5中nav标签的功能及其在网页设计中的应用,帮助开发者更好地理解和使用这一标签来提升网站的结构化水平。 ... [详细]
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • 使用WinForms 实现 RabbitMQ RPC 示例
    本文通过两个WinForms应用程序演示了如何使用RabbitMQ实现远程过程调用(RPC)。一个应用作为客户端发送请求,另一个应用作为服务端处理请求并返回响应。 ... [详细]
  • 本题要求计算给定两个正整数a和b时,2的-a次方与2的-b次方之和,并将结果以最简分数形式表示。输入包括多组测试数据,每组数据包含两个在2到20范围内的整数。 ... [详细]
  • 在本问题中,游戏的每一步状态均可以视为原始序列的一个子序列。通过定义一个动态规划函数 d(i, j),表示在最优策略下,先手玩家从原序列的第 i 个元素到第 j 个元素之间所能获得的最大分数。 ... [详细]
  • 深入理解动态链接库及其应用
    本文将探讨动态链接库的基本概念,包括Windows下的动态链接库(DLL)和Linux下的共享库(Shared Library),并详细介绍如何在Linux环境中创建和使用这些库。 ... [详细]
  • MySQL锁机制详解
    本文深入探讨了MySQL中的锁机制,包括表级锁、行级锁以及元数据锁,通过实例详细解释了各种锁的工作原理及其应用场景。同时,文章还介绍了如何通过锁来优化数据库性能,避免常见的并发问题。 ... [详细]
  • python开发mysql:单表查询&多表查询
    一单表查询,以下是表内容二多表查询,一下是表内容三总结&表创建过程单 ... [详细]
  • jQuery中 $(selector).each() 和 $.each() 的区别与应用
    在JavaScript开发中,jQuery库提供了两种遍历方法:$(selector).each() 和 $.each()。本文将详细探讨这两种方法的不同之处及其应用场景。 ... [详细]
  • C# 对象转 JSON 字符串的方法与应用
    本文介绍如何在 C# 中使用一般处理程序(ASHX)将对象转换为 JSON 字符串,并通过设置响应类型为 application/json 来确保客户端能够正确解析返回的数据。同时,文章还提供了 HTML 页面中不依赖 jQuery 的 AJAX 方法来接收和处理这些 JSON 数据的具体实现。 ... [详细]
author-avatar
流丶血的卓洛
这个家伙很懒,什么也没留下!
RankList | 热门文章