# @4tw/cypress-drag-drop 中文文档

规范地址：https://npmcn.com/package/%404tw/cypress-drag-drop/

版本：2\.3\.1
npm 元数据更新时间：2025-09-22T14:46:07.718Z
中文译文更新时间：2026-11-05T17:21:18.558Z
软件包许可：GPL-3\.0

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

原始 npm 页面：https://www.npmjs.com/package/%404tw/cypress-drag-drop
原文对照：https://npmcn.com/package/%404tw/cypress-drag-drop/?lang=original
项目主页：https://github.com/4teamwork/cypress-drag-drop#readme
源码仓库：https://github.com/4teamwork/cypress-drag-drop

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

- 包体积（解压后）：60.6 kB，30 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：cypress \>=2
- 首次发布：2018-12-20T19:37:32.886Z
- 最新版本发布：2025-09-22T14:46:07.092Z
- 近 30 天下载量：617409（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 0 个）

## 中文简介

用于拖放支持的 Cypress 孩子命令 .

## 安装

```sh
npm install @4tw/cypress-drag-drop
```

也可以使用：`pnpm add @4tw/cypress-drag-drop`、`yarn add @4tw/cypress-drag-drop`、`bun add @4tw/cypress-drag-drop`

## README

# cypress-drag-drop (英语)

拖放支持的 Cypress 孩子命令 .

# 设置

使用 npm 安装 :

```bash
npm install --save-dev @4tw/cypress-drag-drop
```

线条

```bash
yarn add --dev @4tw/cypress-drag-drop
```

在 Cypress 装入之前( 通常在您的 `commands.js`(b) 将下列文字改为:

```javascript
require('@4tw/cypress-drag-drop')
```

或者,如果你使用ES模块语法:

```javascript
import '@4tw/cypress-drag-drop'
```

这将登记 `drag` 财务报告和审定财务报表 `move` 命令.

如果您使用 TypeScript , 请将以下配置放入 `tsconfig.json`

```json
{
  "compilerOptions": {
    "types": ["cypress", "@4tw/cypress-drag-drop"]
  }
}
```

# 使用量

## 拖动

这个 `drag` 命令是儿童命令. 命令只接受元素 . 由于投放目标只是通过一个选择器作为字符串.

在您的 Cypress 光谱中, 使用命令如下 :

```javascript
describe('Dragtest', () => {
  it('should dragndrop', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').drag('.targetitem')
  })
})
```

在第二个参数中将选项作为对象传递.

```javascript
describe('Dragtest', () => {
  it('should dragndrop', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').drag('.targetitem', options)
  })
})
```

在拖放互动过程中,涉及两个元素. 源元素被拖取和落地目标. 为了决定对源或目标应用何种选项,可将选项对象分为: `source` 财务报告和审定财务报表 `target`。不针对源或目标的选项既适用于源,也适用于目标.

```javascript
cy.get('.sourceitem').drag('.target', {
  source: { x: 100, y: 100 }, // applies to the element being dragged
  target: { position: 'left' }, // applies to the drop target
  force: true, // applied to both the source and target element
})
```

选项直接传递给Cypress' `trigger` 命令. 所以,所有选项来自 [https://docs.cypress.io/api/commands/trigger# 参数](https://docs.cypress.io/api/commands/trigger#Arguments) 这是可能的.

### 检查命令结果

这个 `drag` 命令可以显示拖曳尝试是否成功。 所以,命令会屈服 `true` 当拖曳尝试成功 `false` 否则:

```javascript
cy.get('.sourceitem').drag('.target').then((success) => {
  assert.isTrue(success)
})
```

或者您还可能想要检查元素是否不可拖动 :

```javascript
cy.get('.sourceitem').drag('.target').then((success) => {
  assert.isFalse(success)
})
```

## 移动

这个 `move` 命令是儿童命令. 命令只接受元素 . 定义 `deltaX` 财务报告和审定财务报表 `deltaY` 作为对象参数,将元素在x-和y-位置中相对于元素当前位置移动.

在您的 Cypress 光谱中, 使用命令如下 :

```javascript
describe('Movetest', () => {
  it('should move', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').move({ deltaX: 100, deltaY: 100 })
  })
})
```

命令接受来自 [https://docs.cypress.io/api/commands/trigger# 参数](https://docs.cypress.io/api/commands/trigger#Arguments) 除外 `position`, (中文(简体) ), `x` 财务报告和审定财务报表 `y` 因为他们没有效果, 因为命令使用 `clientX` 财务报告和审定财务报表 `clientY` 内部.

```javascript
describe('Movetest', () => {
  it('should move', () => {
    cy.visit('/yourpage')

    cy.get('.sourceitem').move({ deltaX: 100, deltaY: 100, ...options })
  })
})
```

# 发展

插件本身在 `index.js` 文档.

## 测试

测试可以使用 Cypress 进行:

```
yarn test
```

测试装置在下面 `src/examples/`。使用 `setExample` 循环命令 固定器已经装入 并准备进行测试。 中的第一个属性 `setExample` 命令 是需要作为组件文件名的固定符的名称.

```javascript
cy.setExample('NameOfTheComponent')
```

# 释放

发布此软件包的新版本 :

```
yarn run release
```

# 更改日志

看看这个 [更改日志](https://npmcn.com/package/%404tw/cypress-drag-drop/CHANGELOG.md)

## 常见问题

### @4tw/cypress-drag-drop 是什么？

用于拖放支持的 Cypress 孩子命令 \.

### 如何安装 @4tw/cypress-drag-drop？

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

### @4tw/cypress-drag-drop 支持 TypeScript 吗？

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

### @4tw/cypress-drag-drop 支持 ESM 还是 CommonJS？

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

### @4tw/cypress-drag-drop 可以商用吗？

@4tw/cypress-drag-drop 使用 GPL-3\.0 许可。强 Copyleft：分发包含该代码的软件时，整个作品需以 GPL-3\.0 兼容许可开源，并附带专利与反锁定条款。仅内部使用不触发此义务。以上为概括，不构成法律意见，请以许可原文为准。

### @4tw/cypress-drag-drop 的下载量有多少？

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

### @4tw/cypress-drag-drop 还在维护吗？

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