视野修炼-技术周刊第57期

· 浏览次数 : 93

小编点评

**标题:**Draggable Objects - 详细介绍网页元素的拖拽实现 **简介:** 这篇文章详细介绍了网页元素的拖拽实现方法,包括鼠标事件、触摸事件和Pointer事件之间的区别以及如何结合使用这些事件来实现拖拽功能。作者还提供了可运行的 demo 和源码篇幅有限的示例,帮助读者理解如何实现拖拽功能。 **主要内容:** * 鼠标事件、触摸事件和Pointer事件之间的区别 * 如何结合使用这些事件来实现拖拽功能 * 示例代码,展示如何实现拖拽功能 **推荐:** * Rspress - 基于 Rspack 的高性能静态站点生成器 * We OCR - 支持离线使用的图片文字识别工具 * pnpm v8.9 - MacOS上带来更大的性能提升默认使用 reflinks 替代之前的 hard links

正文

笔者在GitHub开了个 discussion 🔥 技术&开源&文章推荐,欢迎读者推荐贡献内容或者知识渠道

欢迎来到第 57 期的【视野修炼 - 技术周刊】,下面是本期的精选内容简介

🔥强烈推荐

  1. Rspress - 基于 Rspack 的高性能静态站点生成器
  2. We OCR - 支持离线使用的图片文字识别工具

🔧开源工具&技术资讯

  1. pnpm v8.9 - MacOS上带来更大的性能提升
  2. 用户体验:嵌套菜单!
  3. Draggable objects - 详细介绍网页元素的拖拽实现

​也推荐大家关注一下最后的推荐内容(周刊的主要内容来源渠道)

下面开始本期内容的介绍,预计阅读时间 6 分钟。

🔥强烈推荐

1. Rspress - 基于 Rspack 的高性能静态站点生成器

由 ByteDance Web Infra 团队孵化的一款静态站点生成器,使用 Rspack 进行构建,基于 React 框架进行渲染,支持 MDX 内容开发,主打高性能、简单易用和定制性强。

风格样式上与 VitePress 差不太多,有搭建文档站点的需求的同学可以尝试一下,构建速度上非常快,内置了许多开箱即用的能力(这点比 VitePress 好很多)

2. We OCR - 支持离线使用的图片文字识别工具

项目代码是开源的:https://github.com/plantree/ocr-pwa 大家可以按需进行二开或者学习

基于 Tesseract 实现

下面是识别效果(马马虎虎,识别率还是很不错的,速度也很快)

🔧开源工具&技术资讯

3. pnpm v8.9 - MacOS上带来更大的性能提升

默认使用 reflinks 替代之前的 hard links

hard links 这个想必了解的人比较多,也就是常说的符号链接里的硬链接

reflinks 这个之前也没了解到,下来单独学习了一下,MacOS上可以用 cp 指令创建

cp -c index.md reflink.md
mac cp

 -c    copy files using clonefile(2)

4. 用户体验:嵌套菜单!

在日常使用软件的过程中,避免不了使用到嵌套菜单的情况

常见的一个场景的case:多个连续的嵌套菜单,当试图将鼠标移入子菜单时,结果整个菜单都关闭了

文章介绍了两种解决方案延时安全三角

其中安全三角笔者认为是比较好的一种解决方案,非常值得学习

作者也实现了一个 demo lencx/fe-tips

5. Draggable objects - 详细介绍网页元素的拖拽实现

这是一篇关于如何实现网页中元素的拖拽效果的文章。作者详细讲解了鼠标事件、触摸事件和Pointer事件之间的区别,以及如何结合使用这些事件来实现拖拽功能。

每一小节,都提供了可运行的 demo 和 源码


篇幅有限,如果你还没看够,可移步后面的推荐渠道,继续游览,历史周刊(<20)移步博客

⭐️强力推荐关注

与视野修炼-技术周刊第57期相似的内容:

视野修炼-技术周刊第57期

① Rspress - 基于 Rspack 的高性能静态站点生成器 ② We OCR - 支持离线使用的图片文字识别工具 ③ pnpm v8.9 - MacOS上带来更大的性能提升 ④ 用户体验:嵌套菜单! ⑤ Draggable objects - 详细介绍网页元素的拖拽实现

视野修炼-技术周刊第92期 | 薅牛毛

① YakShaving - 薅牛毛 ② CSS OneLiners ③ Vue Vine - 单文件编写多 Vue 组件 ④ CDN 流量被盗刷经历 ⑤ es-toolkit ⑥ console.log 体验优化 ⑦ 诗境 - 根据图片匹配诗句

视野修炼-技术周刊第56期

① Vite 的现状与未来展望 ② Web版Photoshop ③ Console Ninja:console调试神器 ④ 为 Eslint 9.0 提前做准备 ⑤ 使用 documate 为 VitePress 文档站添加AI对话能力

铅华洗尽,粉黛不施,人工智能AI基于ProPainter技术去除图片以及视频水印(Python3.10)

视频以及图片修复技术是一项具有挑战性的AI视觉任务,它涉及在视频或者图片序列中填补缺失或损坏的区域,同时保持空间和时间的连贯性。该技术在视频补全、对象移除、视频恢复等领域有广泛应用。近年来,两种突出的方案在视频修复中崭露头角:flow-based propagation和spatiotemporal

【稳定性】稳定性建设之弹性设计

弹性设计为系统稳定性建设提供了一种新的视角和方法,它有助于提高系统的可用性、性能和安全性,同时也降低了维护和修复的成本和风险

研发三维GIS系统笔记/实现wgs84投影-002

四叉树代码修改完善 原来的代码中,没有使用投影转换,直接使用的是世界坐标(单位是米), CELLQuadTree::CELLQuadTree( CELLTerrainInterface* pInterface ,CELLQuadTree* parent ,const real2 vStart ,co

iOS视图控件的内容显示和离屏渲染流程

iOS中UI控件内容显示流程 UIKit界面组成 iOS中组成页面的各个元素基本来自UIKit,我们可以修改布局或自定义绘制来修改UIKit元素的默认展示。 UIView的页面显示内容有CALayer负责,事件的接收与响应由UIView自己负责。 为什么需要有这样的分工呢,原因是因为Mac上和iPh

.NET AsyncLocal 避坑指南

AsyncLocal 用法简介 通过 AsyncLocal 我们可以在一个逻辑上下文中维护一份私有数据,该上下文后续代码中都可以访问和修改这份数据,但另一个无关的上下文是无法访问的。 无论是在新创建的 Task 中还是 await 关键词之后,我们都能够访问前面设置的 AsyncLocal 的数据。

[转帖]SQL语言的分类总结

https://zhuanlan.zhihu.com/p/555596861 常用的SQL命令 数据定义语言DDL(Data Definition Language) create 、drop 、alter 主要为创建、修改、删除数据库的逻辑结构,其中包括表结构,视图和索引等。 create 创建数

PPT 稳妥选用字体

字体怎么选 商务报告PPT字体怎么选 广告宣传PPT字体怎么选 发布会PPT字体怎么选 教学课件PPT字体怎么选--小学以下 教学课件PPT字体怎么选--中学以上 印刷阅读PPT字体怎么选--数据公司 去哪下载 图片识别文字 美化案例 线框修饰 倒影效果 镂空效果 三维旋转字 B站 视频