# @edorivai/react-smooth-dnd 中文文档

规范地址：https://npmcn.com/package/%40edorivai/react-smooth-dnd/

版本：0\.11\.2
npm 元数据更新时间：2022-09-08T07:41:47.975Z
中文译文更新时间：2026-11-13T07:15:48.930Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40edorivai/react-smooth-dnd
原文对照：https://npmcn.com/package/%40edorivai/react-smooth-dnd/?lang=original
项目主页：https://github.com/edorivai/react-smooth-dnd#readme
源码仓库：https://github.com/edorivai/react-smooth-dnd

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：28 kB，7 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>=16\.3
- 首次发布：2022-09-08T07:41:47.577Z
- 最新版本发布：2022-09-08T07:41:47.842Z
- 近 30 天下载量：10692（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

拖放库

## 安装

```sh
npm install @edorivai/react-smooth-dnd
```

也可以使用：`pnpm add @edorivai/react-smooth-dnd`、`yarn add @edorivai/react-smooth-dnd`、`bun add @edorivai/react-smooth-dnd`

## README

# 这是叉子!

2022年9月8日 纽约

这是叉子 [反应- smooth-dnd](https://github.com/kutlugsahin/react-smooth-dnd)。这一分叉的唯一目的是扩大提交文件的对应对等依赖 [公关#80](https://github.com/kutlugsahin/react-smooth-dnd/pull/80)。如果PR被合并,则不再需要这个分叉.

# 反应- smooth-dnd

一个快速和轻量级拖放,可排序库用于 React , 包含许多 d&d 方案的许多配置选项 。 它使用 Css 转换动画,所以只要可能,硬件就加速.

此库包含包装器 React 组件 over [平滑倾角](https://github.com/kutlugsahin/smooth-dnd/) 图书馆.

**显示,不要告诉!**

### [演示页](https://kutlugsahin.github.io/smooth-dnd-demo/)

### 安装

```shell
npm i @edorivai/react-smooth-dnd
```

## 使用量

#### 联合来文十

```jsx
import React, { Component } from "react";
import { Container, Draggable } from "@edorivai/react-smooth-dnd";

class SimpleSortableList extends Component {
  render() {
    return (
      <div>
        <Container onDrop={this.props.onDrop}>
          {this.props.items.map((item) => {
            return (
              <Draggable key={item.id}>{this.props.renderItem(item)}</Draggable>
            );
          })}
        </Container>
      </div>
    );
  }
}
```

## API 密码

### **集装箱**

包含可拖动元素或组件的组件。 每一个儿童都应该受到 **可拖动** 组件

### 道具

| 财产 | 类型 | 默认 | 说明 |
| --- | :-: | :-: | --- |
| 儿童 | **可拖动** | 无效 | 反应儿童道具。 应该是类型 **可拖动**。 。 。 . |
| 方向 | 字符串 | `vertical` | 集装箱的方向。 可能会 **水平** 或者说 **垂直**。 。 。 . |
| 行为 | 字符串 | `move` | 用于描述天气的属性 拖曳项将被移动或复制到目标容器中 。 如果设置了空投区, 当容器被拖过时不会拖动 。 可能会 **移动** 或者说 **复制** 或者说 **空投区** 或者说 **包含** |
| 组Name | 字符串 | `undefined` | 可在同一组名的容器之间移动可拖放设备。 如果不设置容器, 将不接受外部拖放 。 这种行为可以被shouldAceptDrop函数所取代. 见下文. |
| 锁定轴 | 字符串 | `undefined` | 锁定拖动轴 。 可能值为 **页:1**, (中文(简体) ), **尔** 或者说 **未定义**。 。 。 . |
| 拖动手持选择器 | 字符串 | `undefined` | 要测试允许拖曳的 Cs 选择器 。 如果没有指定项目,则可以从其边界的任何地方抓取. |
| 非垃圾区选择器 | 字符串 | `undefined` | 防止拖曳的 Cs 选择器 。 当您在可拖动的项目内有窗体元素或可选择的文本时, 可能有用 。 它有优于 **拖动手持选择器**。 。 。 . |
| 拖曳 Begin 延迟 | 编号 | `0` (单位:千美元)`200` (用于触摸设备) | 时间在微秒。 按下项目后拖放延迟 。 在延迟前移动光标会取消拖曳 . |
| 动画期限 | 编号 | `250` | 动画持续时间为milisecond. 为了保持一致,这一动画持续时间将适用于投放和重排动画. |
| 自动滚动 | 布尔 | `true` | 如果拖曳项接近边框, 首个可滚动父将自动滚动 . |
| 拖动分类 | 字符串 | `undefined` | 被拖走的鬼东西中要加入的等级. 该类在被加入到DOM之后会被添加,因此该类中的任何过渡都会如愿以偿. |
| 滴入分类 | 字符串 | `undefined` | 在投放动画开始前,要加入到"鬼"项目中. |
| 删除关闭 | 布尔 | `undefined` | 当在 Drop 上设定为真时, 如果您将元素从任何相关的容器中丢出, 将会使用已删除的Index 调用 |
| 滴入标记符 | 布尔, 对象 | `undefined` | 空出占位符的选项 . **类Name**, (中文(简体) ), **动画期限**, (中文(简体) ), **显示 Top** |
| 在DragStart上开始 | 函数 | `undefined` | _见下文说明_ |
| 打开 | 函数 | `undefined` | _见下文说明_ |
| 准备 | 函数 | `undefined` | _见下文说明_ |
| 打开 | 函数 | `undefined` | _见下文说明_ |
| 获得儿童付费量 | 函数 | `undefined` | _见下文说明_ |
| 应 AnimateDrop | 函数 | `undefined` | _见下文说明_ |
| 应接受 | 函数 | `undefined` | _见下文说明_ |
| 在德拉格内 | 函数 | `undefined` | _见下文说明_ |
| 在德拉格莱夫 | 函数 | `undefined` | _见下文说明_ |
| 获取鬼父母 | 函数 | `undefined` | _见下文说明_ |
| 提交 | 函数 | `undefined` | _见下文说明_ |

* * *

### 在DragStart上开始

拖曳开始时要被所有容器调用的函数 .

```js
function onDragStart({isSource, payload, willAcceptDrop}) {
  ...
}
```

#### 参数

-   **来源** 数字 : `boolean` : 如果它被拖曳的容器所调用, 则它是真实的.
-   **有效载数** 数字 : `object` :通过GetChildPayload函数返回的有效载荷物体。 如果未设定 ChildPayload , 它将被取消定义 .
-   **将接受Drop** 数字 : `boolean` :如果被拖走的物品可以被扔入容器,则属实,否则是假的.

### 打开

当拖曳结束时, 所有容器都要调用函数 。 以前打电话过 **打开** 函数

```js
function onDragEnd({isSource, payload, willAcceptDrop}) {
  ...
}
```

#### 参数

-   **来源** 数字 : `boolean` :如果它被拖动开始的容器所叫,则真实性,否则是虚假的.
-   **有效载数** 数字 : `object` :通过GetChildPayload函数返回的有效载荷物体。 如果未设定 ChildPayload , 它将被取消定义 .
-   **将接受Drop** 数字 : `boolean` :如果被拖走的物品可以被扔入容器,则属实,否则是假的.

### 准备

当容器中可能掉落位置的索引改变时, 被拖放的容器将调用的函数 。 基本上,每次在容器幻灯片中为被拖走的项目打开一个空格时,都会称之为拖放. **滴出结果** 是传递给包含以下属性的函数的唯一参数.

```js
function onDropReady(dropResult) {
  const { removedIndex, addedIndex, payload, element } = dropResult;
  ...
}
```

#### 参数

-   **滴出结果** 数字 : `object`
    -   **删除 指数** 数字 : `number` : 被带走儿童指数。 将会是 `null` 如果没有任何物品被移除.
    -   **已添加 指数** 数字 : `number` : 添加已丢弃项目的索引。 将会是 `null` 如果没有增加项目.
    -   **有效载数** 数字 : `object` : 通过调用检索的有效载荷物体 _获得儿童付费量_ 函数.
    -   **元素** 数字 : `DOMElement` : 移动的 DOM 元素

### 打开

任何相关容器在投放完毕时调用功能 。 (倒下动画结束后). 源容器和任何可接受滴水的容器都被认为是相关的. **滴出结果** 是传递给包含以下属性的函数的唯一参数.

```js
function onDrop(dropResult) {
  const { removedIndex, addedIndex, payload, element } = dropResult;
  ...
}
```

#### 参数

-   **滴出结果** 数字 : `object`
    -   **删除 指数** 数字 : `number` : 被带走儿童指数。 将会是 `null` 如果没有任何物品被移除.
    -   **已添加 指数** 数字 : `number` : 添加已丢弃项目的索引。 将会是 `null` 如果没有增加项目.
    -   **有效载数** 数字 : `object` : 通过调用检索的有效载荷物体 _获得儿童付费量_ 函数.
    -   **元素** 数字 : `DOMElement` : 移动的 DOM 元素

### 获得儿童付费量

使有效载荷物体通过所需的函数 **打开** 函数.

```js
function getChildPayload(index) {
  return {
    ...
  }
}
```

#### 参数

-   **指数** 数字 : `number` : 儿童项目索引

#### 回返

-   **有效载数** 数字 : `object`

### 应 AnimateDrop

被拖放项目将降入的目标容器所调用的函数 . 有时被拖走的物品的尺寸与目标容器不相适应,而投放动画可以发抖. 这样它就可以通过返回被禁用 **虚假**。如果没有设置投放动画,则启用.

```js
function shouldAnimateDrop(sourceContainerOptions, payload) {
  return false;
}
```

#### 参数

-   **源文件夹选项** 数字 : `object` :源容器的选项。 (被拖走物品的上方容器)
-   **有效载数** 数字 : `object` : 通过调用检索的有效载荷物体 _获得儿童付费量_ 函数.

#### 回返

-   **布尔** 数字 : **真/ 假**

### 应接受

拖放前所有容器的调用功能开始确定可能投放的容器. 设置此函数将覆盖 **组Name** 属性,只考虑此函数的返回值.

```js
function shouldAcceptDrop(sourceContainerOptions, payload) {
  return true;
}
```

#### 参数

-   **源文件夹选项** 数字 : `object` :源容器的选项。 (被拖走物品的上方容器)
-   **有效载数** 数字 : `object` : 通过调用检索的有效载荷物体 _获得儿童付费量_ 函数.

#### 回返

-   **布尔** 数字 : **真/ 假**

### 在德拉格内

当被拖取的物品在拖取时进入其边界时,该函数将被相关容器调用.

```js
function onDragEnter() {
  ...
}
```

### 在德拉格莱夫

当被拖放的物品在拖放时离开其界限时,由相关容器调用功能.

```js
function onDragLeave() {
  ...
}
```

### 获取鬼父母

要获取被拖走的幽灵会被附加的元素的函数 。 默认母元素是容器本身. 幽灵元素被定位为"固定"并附在给定的父元素上. 但是,如果任何容器的内脏有变换属性,鬼元将相对于打破计算结果的元素定位. 因此,如果集装箱中有任何改变的母元素,您应当设置此属性,以便返回未改变母元素的任何元素.

```js
function getGhostParent() {
  // i.e return document.body;
}
```

### 提交

默认情况下, Control 对组件根使用 div 元素 。 您可以通过使用 **提交** 函数。 如果渲染函数被设定, **儿童** 集装箱道具将被忽略,并使用渲染物的还原值来制造可拖动物.

```js
function render(ref) {
  // return ReactElement
}
```

#### 参数

-   **参考** 数字 : `object` : 反应引用对象 _React.create Ref () 创建参考文献_

#### 回返

-   **反应元素**

```jsx
<Container
  render={(ref) => {
    return (
      <ul ref={ref}>
        ...place your <Draggable /> components here
      </ul>
    );
  }}
/>
```

### **可拖动**

集装箱儿童包装部件。 每个可拖动的元素都应该用 **可拖动** 组件.

> 确保设置唯一的密钥到 **可拖动** 特别是当它包含其他 **集装箱** 组件

### 道具

| 财产 | 类型 | 默认 | 说明 |
| --- | :-: | :-: | --- |
| 提交 | 函数 | `undefined` | _见下文说明_ |

### 提交

默认 Draggable 对组件根使用 div 元素 。 您可以通过使用 **提交** 函数。 如果渲染函数被设定, **儿童** 将忽略可拖放的道具,并将使用渲染的还原值来使可拖放.

```jsx
<Draggable
  render={() => {
    return <li>...</li>;
  }}
/>
```

#### 参数

-   **参考** 数字 : `object` : 反应引用对象 _React.create Ref () 创建参考文献_

#### 回返

-   **反应元素**

## 常见问题

### @edorivai/react-smooth-dnd 是什么？

拖放库

### 如何安装 @edorivai/react-smooth-dnd？

在项目目录运行 npm install @edorivai/react-smooth-dnd，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @edorivai/react-smooth-dnd 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @edorivai/react-smooth-dnd 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @edorivai/react-smooth-dnd 可以商用吗？

@edorivai/react-smooth-dnd 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @edorivai/react-smooth-dnd 的下载量有多少？

根据 npm 官方下载统计，@edorivai/react-smooth-dnd 在 2026/10/13 – 2026/11/11 这 30 天内被下载 10,692 次，日均约 356 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @edorivai/react-smooth-dnd 还在维护吗？

最新版本 0\.11\.2 发布于 2022/09/08（4 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/09/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。