[js] 支持文档树 shift+click 多选文档

本贴最后更新于 382 天前,其中的信息可能已经时移世改

抱怨思源笔记不能 shift+click 多选文档已久

终于忍无可忍,用了 3 分钟让 claude 写了一个代码片段

暂时用了没有问题,有问题欢迎反馈

使用方法

普通 click 点击第一个文档,按 shift+click 点击最后一个文档,即可选中区域内的所有文档进行批量操作(删除、移动等)

代码片段

(() => {
    let lastClickedItem = null;

    function handleFileClick(event) {
        if (!event.shiftKey) {
            // 普通点击,记录最后点击的项目
            lastClickedItem = event.target.closest('li[data-type="navigation-file"]');
            return;
        }

        const currentItem = event.target.closest('li[data-type="navigation-file"]');
        if (!currentItem || !lastClickedItem) return;

        // 获取所有文档项
        const allFiles = Array.from(document.querySelectorAll('li[data-type="navigation-file"]'));
  
        // 获取起始和结束索引
        const startIndex = allFiles.indexOf(lastClickedItem);
        const endIndex = allFiles.indexOf(currentItem);
  
        if (startIndex === -1 || endIndex === -1) return;

        // 确定选择范围
        const start = Math.min(startIndex, endIndex);
        const end = Math.max(startIndex, endIndex);

        // 清除现有选择
        allFiles.forEach(file => {
            file.classList.remove('b3-list-item--focus');
        });

        // 添加新选择
        for (let i = start; i <= end; i++) {
            allFiles[i].classList.add('b3-list-item--focus');
        }

        // 阻止默认行为
        event.preventDefault();
        event.stopPropagation();
    }

    function initShiftSelect() {
        // 移除可能存在的旧事件监听器
        document.removeEventListener('click', handleFileClick, true);
  
        // 添加新的事件监听器
        document.addEventListener('click', handleFileClick, true);
    }

    // 初始化
    initShiftSelect();

    // 导出初始化函数,以便需要时重新初始化
    window.initShiftSelect = initShiftSelect;
})();

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    28452 引用 • 119811 回帖 • 1 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    286 引用 • 1988 回帖
2 操作
Achuan-2 在 2024-12-05 17:31:16 更新了该帖
Achuan-2 在 2024-12-05 10:36:41 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • AndyRon

    感谢,新版本中应该加入这个功能

    1 回复
  • 其他回帖
  • zhunge

    很好用,解决了痛点,感谢!

  • Mayrain

    蹲一个,过几天看看有没有 bug,如果没 bug 就狠狠开用

    1 回复
  • isXavier 4 评论

    为什么我这边不行,c+sht+ 点击,只会文档下分屏打开,不能多选,快捷键里也没看到这个设置

    代码片段有启用吗?
    JeffreyChen
    肯定启动了,两个都打开了
    isXavier
    @isXavier 截图看看代码片段窗口,看看有没有弄对
    JeffreyChen
    重启软件就可以了
    bilen
  • 查看全部回帖
Achuan-2
公众号:https://mp.weixin.qq.com/s/_NrGwjJnEta0oT5a6EKdiA 知乎:https://www.zhihu.com/column/c_1922583788405359964 上海

推荐标签 标签

  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 123 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 57 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    188 引用 • 833 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 181 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 376 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    33 引用 • 108 回帖
  • danl
    216 关注
  • Excel
    32 引用 • 29 回帖 • 1 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    232 引用 • 484 回帖
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 3 关注
  • 自由行
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 190 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 692 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    34 引用 • 333 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    11158 引用 • 50674 回帖 • 50 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    293 引用 • 4496 回帖 • 687 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 668 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖 • 2 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 545 关注
  • 创业

    你比 99% 的人都优秀么?

    81 引用 • 1396 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3206 引用 • 8217 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 368 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖 • 1 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    960 引用 • 946 回帖
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 4 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    45 引用 • 44 回帖 • 2 关注
  • OnlyOffice
    4 引用 • 41 关注