5 分钟上手 Viselect给任意 DOM 加上桌面级框选能力【免费下载链接】selection✨ Viselect - A high performance and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies, super small. Support for major frameworks!项目地址: https://gitcode.com/gh_mirrors/se/selection做批量操作时最怕的就是逐个点页面上几十个卡片、列表项要勾选鼠标点到手酸。Viselect 的思路是把桌面上的框选交互搬进浏览器——在任意 DOM 结构上按住鼠标拖出一个矩形框内的元素即时响应选中事件不用你重写布局或事件系统。先看它轻在哪。核心包 gzip 后约 4KB依赖数为 0打包工具不会因为多引一个库而报警同一套 API 覆盖桌面鼠标、移动端和触摸设备Vue 3、React、Preact 都有官方包不写框架就直接用 vanilla 版。原生版迭代了 6 年以上多个真实应用在用不是玩具项目。最短路径两行代码跑起框选装原生包npm i viselect/vanilla页面里已有可点击的 div 时只需要两行import SelectionArea from viselect/vanilla; const selection new SelectionArea({ selectables: [.container div], boundaries: [.container] });再挂两个事件选中态就生效了selection.on(start, ({store, event}) { /* 开始拖拽 */ }) .on(move, ({store: {changed: {added, removed}}}) { added.forEach(el el.classList.add(selected)); });不想装依赖的话文档里也给了 CDN 直接 import 的写法viselect/vanilla的 mjs 产物几分钟就能在本地页面看到效果。常用配置记住这 3 个就够selectablesCSS 选择器数组告诉 Viselect 哪些元素可以被框中。选择器你肯定熟这里就不再展开了。boundaries框选的边界容器矩形画到哪里为止。如果边界容器本身可滚动它会自动被当作滚动容器处理。behaviour行为开关。默认overlap: invert再框一次反选改keep则只增不减intersect决定碰到元素算不算选中可选 touch碰到、center碰到中心、cover完全盖住startThreshold控制拖动多少像素后才真正开始框选防止误触。startareas、selectionAreaClass等其余选项默认值就能用需要时查 API 参考即可。滚动容器里框选元素现象容器内容比视口长用户想选底部元素得先滚到底再框。做法把 boundaries 设成那个容器本身。框选矩形贴到容器边缘时Viselect 会自动让内容继续滚动选到底部元素不用手动滚。滚动的快慢在behaviour.scrolling里调speedDivider和startScrollMargins都是为全屏类容器准备的。大量元素拖选不掉帧现象元素成百上千拖拽时怕选择计算卡主线程。Viselect 内部按帧批量做相交检测框选矩形是一个绝对定位的普通 div拖动开销很小。官方 demo 里一次性生成几百个 div 再拖动框选依然流畅元素数量再大时按常规思路配合虚拟滚动只让视口内的元素参与检测即可。移动端与多点触控现象手机上没有鼠标框选靠两根手指完成。touch 支持默认开启features.touch: true多点触控开箱即用一指点在元素上另一点拖出矩形。移动端常见的手指一动就滚走也被处理掉了——触发框选后不会误触页面滚动。各框架接入包名不同心智模型相同Vue、React、Preact 的包分别是viselect/vue、viselect/react、viselect/preact装法一样。React 和 Preact 的组件直接把selectables、boundaries作为 props 传入事件走onStart、onMove这类 propsVue 版组件提供start、move事件init回调会拿到原生 SelectionArea 实例。底层全是同一套 vanilla 实现API 名保持一致切换框架时不用重学。项目较大、需要更细控制时官方文档建议直接用 vanilla 包自行集成多花一点时间但后患更少。样式定制很简单给selectionAreaClass指向的类名写 CSS 就能改框选矩形的背景透明度、边框和圆角选中高亮则是自己在 move 回调里加删类名完全由你的 CSS 说了算。完整选项见仓库里的 API 参考 与 快速上手。Viselect 把DOM 元素框选收敛成了两行初始化加两个事件装完包、填好两个 CSS 选择器桌面级的可视化选择体验就能跑起来。【免费下载链接】selection✨ Viselect - A high performance and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies, super small. Support for major frameworks!项目地址: https://gitcode.com/gh_mirrors/se/selection创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/8/24 4:22:03 · 阅读 1.2k 5 分钟上手 Viselect：给任意 DOM 加上桌面级框选能力
5 分钟上手 Viselect给任意 DOM 加上桌面级框选能力【免费下载链接】selection✨ Viselect - A high performance and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies, super small. Support for major frameworks!项目地址: https://gitcode.com/gh_mirrors/se/selection做批量操作时最怕的就是逐个点页面上几十个卡片、列表项要勾选鼠标点到手酸。Viselect 的思路是把桌面上的框选交互搬进浏览器——在任意 DOM 结构上按住鼠标拖出一个矩形框内的元素即时响应选中事件不用你重写布局或事件系统。先看它轻在哪。核心包 gzip 后约 4KB依赖数为 0打包工具不会因为多引一个库而报警同一套 API 覆盖桌面鼠标、移动端和触摸设备Vue 3、React、Preact 都有官方包不写框架就直接用 vanilla 版。原生版迭代了 6 年以上多个真实应用在用不是玩具项目。最短路径两行代码跑起框选装原生包npm i viselect/vanilla页面里已有可点击的 div 时只需要两行import SelectionArea from viselect/vanilla; const selection new SelectionArea({ selectables: [.container div], boundaries: [.container] });再挂两个事件选中态就生效了selection.on(start, ({store, event}) { /* 开始拖拽 */ }) .on(move, ({store: {changed: {added, removed}}}) { added.forEach(el el.classList.add(selected)); });不想装依赖的话文档里也给了 CDN 直接 import 的写法viselect/vanilla的 mjs 产物几分钟就能在本地页面看到效果。常用配置记住这 3 个就够selectablesCSS 选择器数组告诉 Viselect 哪些元素可以被框中。选择器你肯定熟这里就不再展开了。boundaries框选的边界容器矩形画到哪里为止。如果边界容器本身可滚动它会自动被当作滚动容器处理。behaviour行为开关。默认overlap: invert再框一次反选改keep则只增不减intersect决定碰到元素算不算选中可选 touch碰到、center碰到中心、cover完全盖住startThreshold控制拖动多少像素后才真正开始框选防止误触。startareas、selectionAreaClass等其余选项默认值就能用需要时查 API 参考即可。滚动容器里框选元素现象容器内容比视口长用户想选底部元素得先滚到底再框。做法把 boundaries 设成那个容器本身。框选矩形贴到容器边缘时Viselect 会自动让内容继续滚动选到底部元素不用手动滚。滚动的快慢在behaviour.scrolling里调speedDivider和startScrollMargins都是为全屏类容器准备的。大量元素拖选不掉帧现象元素成百上千拖拽时怕选择计算卡主线程。Viselect 内部按帧批量做相交检测框选矩形是一个绝对定位的普通 div拖动开销很小。官方 demo 里一次性生成几百个 div 再拖动框选依然流畅元素数量再大时按常规思路配合虚拟滚动只让视口内的元素参与检测即可。移动端与多点触控现象手机上没有鼠标框选靠两根手指完成。touch 支持默认开启features.touch: true多点触控开箱即用一指点在元素上另一点拖出矩形。移动端常见的手指一动就滚走也被处理掉了——触发框选后不会误触页面滚动。各框架接入包名不同心智模型相同Vue、React、Preact 的包分别是viselect/vue、viselect/react、viselect/preact装法一样。React 和 Preact 的组件直接把selectables、boundaries作为 props 传入事件走onStart、onMove这类 propsVue 版组件提供start、move事件init回调会拿到原生 SelectionArea 实例。底层全是同一套 vanilla 实现API 名保持一致切换框架时不用重学。项目较大、需要更细控制时官方文档建议直接用 vanilla 包自行集成多花一点时间但后患更少。样式定制很简单给selectionAreaClass指向的类名写 CSS 就能改框选矩形的背景透明度、边框和圆角选中高亮则是自己在 move 回调里加删类名完全由你的 CSS 说了算。完整选项见仓库里的 API 参考 与 快速上手。Viselect 把DOM 元素框选收敛成了两行初始化加两个事件装完包、填好两个 CSS 选择器桌面级的可视化选择体验就能跑起来。【免费下载链接】selection✨ Viselect - A high performance and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies, super small. Support for major frameworks!项目地址: https://gitcode.com/gh_mirrors/se/selection创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考