[css] 固定回收站置文档树底部

之前反馈的回收站功能估计 d 大不会开发了, 我就做了个简陋版的

写在前面, 必看

  1. 说是回收站, 其实还是一个笔记本
  2. css 是将最后一个笔记本作为回收站, 只会将最后一个笔记本识别成回收站
  3. 用法是: 将文档拖动到笔记本上即可完成移动

css 代码

div.sy__file>div.fn__flex-1>ul:last-of-type {
    bottom: 0px;
    position: sticky;
    background-color: lightgoldenrodyellow!important;
    height: 60px;
}

效果

  1. 文档拖动到区域 1, 即可移动到回收站
  2. 因为自身功能: 文档拖动到文档树底部的时候, 文档树会自动向下滚动, 所以给这个笔记本增加了区域 2
  3. 文档拖动到区域 2, 即可向下滚动

image.png

  • 思源笔记

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

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

    21600 引用 • 85454 回帖 • 3 关注
  • 代码片段

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

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

    41 引用 • 219 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

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

    如果哪位大佬有更优雅的方法, 请告知我, 非常感谢

  • wilsons 1 1 赞同 1 评论

    我觉得,应该拦截删除文档的操作,然后删除前复制一份到回收站笔记本。

    也对, 不过我之前习惯拖动, 所以才做的这个
    EmberSky
  • 其实可以劫持 fetch 对删除相关接口的请求然后中间先弄个备份,但是这操作有点邪门不好往集市放

  • leolee 1 2 评论
    class FetchInterceptor {
      constructor() {
        this.beforeFetchHooks = [];
        this.afterFetchHooks = [];
        this.originalFetch = window.fetch;
        this.setupInterceptor();
      }
    
      setupInterceptor() {
        window.fetch = (resource, init) => {
          // 触发请求前的钩子
          this.beforeFetchHooks.forEach(hook => {
            hook(resource, init);
          });
    
          // 调用原始的 fetch 方法
          return this.originalFetch(resource, init).then(response => {
            // 触发请求后的钩子
            this.afterFetchHooks.forEach(hook => {
              hook(response);
            });
    
            return response;
          }).catch(error => {
            // 可以在这里处理错误
            console.error('Fetch error:', error);
            throw error;
          });
        };
      }
    
      // 添加请求前的拦截器
      beforeFetch(hook) {
        this.beforeFetchHooks.push(hook);
      }
    
      // 添加请求后的拦截器
      afterFetch(hook) {
        this.afterFetchHooks.push(hook);
      }
    
      // 移除拦截器
      removeInterceptor() {
        window.fetch = this.originalFetch;
      }
    }
    
    
    1 回复
    差不多这样吧,反正有点邪门,之前有个更加邪门的方案我忘记丢哪里了
    leolee
    感谢, 我研究一下
    EmberSky
  • 之前有个更加邪门的方案我忘记丢哪里了

    👍 找不到了没关系,可以说说大概思路嘛