# @air/react-drag-to-select 中文文档
规范地址：https://npmcn.com/package/%40air/react-drag-to-select/
版本：5\.0\.11
npm 元数据更新时间：2026-10-09T12:00:33.370Z
中文译文更新时间：2026-11-05T17:39:47.623Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40air/react-drag-to-select
原文对照：https://npmcn.com/package/%40air/react-drag-to-select/?lang=original
项目主页：https://github.com/AirLabsTeam/react-drag-to-select#readme
源码仓库：https://github.com/AirLabsTeam/react-drag-to-select
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：114 kB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react 16 - 19，react-dom 16 - 19
- 首次发布：2021-10-15T19:24:35.254Z
- 最新版本发布：2025-06-24T19:01:18.491Z
- 近 30 天下载量：178065（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 0 个）
## 中文简介
显示器 React 库, 将拖曳添加到您的应用程序中
## 安装
```sh
npm install @air/react-drag-to-select
```
也可以使用：`pnpm add @air/react-drag-to-select`、`yarn add @air/react-drag-to-select`、`bun add @air/react-drag-to-select`
## README
# 反应拖放到选择
_一个高性能的 React 库, 它会添加拖放到您的应用程序中 ._
[](https://www.npmjs.com/package/@air/react-drag-to-select)  
## \* 特性
- 在 2.3 GHz Quad-Core Intel Core i7 上6xCPU减速近60英尺
- 简单的API. 它不实际选择项目; 只绘制选择框并传递坐标, 这样您就可以确定( 虽然我们提供了帮助 )
- 在类型脚本中完全构建
- 单位和e2e测试
- 积极试验 [生产规模应用](https://air.inc/)
## 安装
```bash
npm install --save @air/react-drag-to-select
```
```bash
yarn add @air/react-drag-to-select
```
## 使用量
```tsx
import { useSelectionContainer } from '@air/react-drag-to-select'
const App = () => {
const { DragSelection } = useSelectionContainer();
return (
)
}
```
请检查此代码和框以获取完整的工作示例 : [https://codesandbox.io/s/billowing-lake-rzhid4 互联网档案馆的存檔,存档日期2013-12-21](https://codesandbox.io/s/billowing-lake-rzhid4)
## 使用选择控制符参数
| 名称 | 需求 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- | --- |
| `onSelectionStart` | 没有 | `() => void` | | 选择开始时调用的方法( mouse 已下调并移动) |
| `onSelectionEnd` | 没有 | `() => void` | | 选择结束时调用的方法( mouse is up) |
| `onSelectionChange` | 对 | `(box: Box) => void` | | 选择移动时调用的方法 |
| `isEnabled` | 没有 | `boolean` | `true` | 如果错误, 选择不会开火 |
| `eventsElement` | 没有 | `Window`, (中文(简体) ), `HTMLElement` 或者说 `null` | `window` | 听鼠标事件的元素 |
| `selectionProps` | 没有 | `React.HTMLAttributes` | | 选择方案 - 您可以在此通过样式如下: |
| `shouldStartSelecting` | 没有 | `() => boolean` | `undefined` | 如果提供,这种回调会向鼠标下下发,并可用于防止选择开始. 当您想要阻止您应用程序的某些区域被选中时,此选项是有用的 。 返回真将允许选择, 返回假将阻止选择开始 . |
## 选择样式
样式选择框, 通过 `selectionProps: { style }` 道具 :
```tsx
const { DragSelection } = useSelectionContainer({
...,
selectionProps: {
style: {
border: '2px dashed purple',
borderRadius: 4,
backgroundColor: 'brown',
opacity: 0.5,
},
},
});
```
选择框的默认样式是
```ts
{
border: '1px solid #4C85D8',
background: 'rgba(155, 193, 239, 0.4)',
position: `absolute`,
zIndex: 99,
}
```
## 在某些区域禁用选择
有时,您想要禁用用户开始在某个区域进行选择。 你可以用这个 `shouldStartSelecting` 道具这个.
```tsx
const { DragSelection } = useSelectionContainer({
shouldStartSelecting: (target) => {
/**
* In this example, we're preventing users from selecting in elements
* that have a data-disableselect attribute on them or one of their parents
*/
if (target instanceof HTMLElement) {
let el = target;
while (el.parentElement && !el.dataset.disableselect) {
el = el.parentElement;
}
return el.dataset.disableselect !== "true";
}
/**
* If the target doesn't exist, return false
* This would most likely not happen. It's really a TS safety check
*/
return false;
}
});
```
见这里的全部例子: [https://codesandbox.io/s/ 引用-rubin-xxf6r0 页面存档备份,存于互联网档案馆](https://codesandbox.io/s/exciting-rubin-xxf6r0)
## 滚动
因为我们使用鼠标位置来计算选择框的坐标,如果您 `` 在一个滚动的区域里,你需要做一些调整。 我们的库在本质上无法知道哪个父正在被滚动,以及它位于滚动父内部的位置(如果上面还有其他的同父异母元素).
你那边怎么解决的 `left` (用于横向滚动)和 `top` (用于垂直滚动) `selectionBox` 传递给 `handleSelectionChange`见 [`onSelectionChange` 实例](https://github.com/AirLabsTeam/react-drag-to-select/blob/main/example/src/App.tsx#L20) 为了一个如何做到这一点的想法.
## 常见问题
### @air/react-drag-to-select 是什么？
显示器 React 库, 将拖曳添加到您的应用程序中
### 如何安装 @air/react-drag-to-select？
在项目目录运行 npm install @air/react-drag-to-select，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（16 - 19）、react-dom（16 - 19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @air/react-drag-to-select 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @air/react-drag-to-select 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @air/react-drag-to-select 可以商用吗？
@air/react-drag-to-select 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @air/react-drag-to-select 的下载量有多少？
根据 npm 官方下载统计，@air/react-drag-to-select 在 2026/10/05 – 2026/11/03 这 30 天内被下载 178,065 次，日均约 5,936 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @air/react-drag-to-select 还在维护吗？
最新版本 5\.0\.11 发布于 2025/06/25（1\.4 年前）；至今共发布 25 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/10/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。