# @foblex/drag-toolkit 中文文档

规范地址：https://npmcn.com/package/%40foblex/drag-toolkit/

版本：1\.1\.1
npm 元数据更新时间：2025-05-23T22:34:00.950Z
中文译文更新时间：2026-11-15T03:45:08.450Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40foblex/drag-toolkit
原文对照：https://npmcn.com/package/%40foblex/drag-toolkit/?lang=original
项目主页：https://flow.foblex.com/
源码仓库：https://github.com/siarheihuzarevich/f-drag-toolkit

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

- 包体积（解压后）：199 kB，33 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2024-09-14T09:44:23.256Z
- 最新版本发布：2025-05-23T22:34:00.729Z
- 近 30 天下载量：16716（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

TypeScript 库为 Angular 应用程序执行拖放功能提供基础类和公用设备,同时支持鼠标和触摸事件,并设计用于与 Angular 的 NgZone 工作或不工作(无区应用程序)

## 安装

```sh
npm install @foblex/drag-toolkit
```

也可以使用：`pnpm add @foblex/drag-toolkit`、`yarn add @foblex/drag-toolkit`、`bun add @foblex/drag-toolkit`

## README

# Foblex 拖放工具箱

TypeScript 库提供基础类和公用设备,用于在 Angular 应用程序中实施拖放功能,同时支持鼠标和触摸事件,并设计与 Angular 的 NgZone(无区应用程序)一起工作. 用于 [Foblex 流动](https://flow.foblex.com/) 用于拖放操作.

## 概览

Foblex Drag工具包简化了Angular应用程序中拖放相互作用的实施,提供了:

-   **统一指针事件**: 用于统一处理鼠标和触摸事件的摘要类.
-   **拖放底盘类**:一个抽象的基类 DragAndDropBase 封装了用于拖放操作的常用逻辑.
-   **水电费**:用于事件处理的帮助器功能和类,包括支持被动事件收听者.
-   **角区兼容性**: 设计为与Angular的NgZone或没有NgZone工作,使其适合无区应用.

通过扩展 DragAndDropBase 类并实施其抽象方法,开发者可以创建自定义拖放组件,在不同输入类型之间有一致的行为.

## 安装

通过 npm 安装库 :

```bash
  npm install @foblex/drag-toolkit
```

## 使用量

### 创建自定义拖放组件

扩展 DragAndDropBase 类并执行抽象方法 :

```typescript
import { Component, ElementRef } from '@angular/core';
import {
  DragAndDropBase,
  IPointerEvent,
  ICanRunOutsideAngular,
} from '@foblex/drag-toolkit';

@Component({
  selector: 'app-draggable',
  template: `<div #draggableElement>Drag Me!</div>`,
})
export class DraggableComponent extends DragAndDropBase {
  public hostElement: HTMLElement;
  public disabled = false;

  constructor(
    private elementRef: ElementRef,
    ngZone: ICanRunOutsideAngular
  ) {
    super(ngZone);
    this.hostElement = this.elementRef.nativeElement;
  }

  protected prepareDragSequence(event: IPointerEvent): void {
    // Initialize drag operation
  }

  protected finalizeDragSequence(): void {
    // Clean up after drag operation
  }

  protected onSelect(event: Event): void {
    // Handle text selection during drag
    event.preventDefault();
  }

  public onPointerDown(event: IPointerEvent): boolean {
    // Determine if drag should start
    return true;
  }

  public onPointerMove(event: IPointerEvent): void {
    // Handle dragging movement
  }

  public onPointerUp(event: IPointerEvent): void {
    // Handle drag completion
  }
}
```

### 订阅事件

确保您适当调用订阅和不订阅方法, 通常使用ngOnInit和ngOnDestroy:

```typescript
import { AfterViewInit, OnDestroy } from '@angular/core';

export class DraggableComponent
  extends DragAndDropBase
  implements AfterViewInit, OnDestroy
{
  // ... (other code)

  ngAfterViewInit(): void {
    this.subscribe(document);
  }

  ngOnDestroy(): void {
    this.unsubscribe();
  }
}
```

## 处理错误

-   合成事件 : 库检查在触摸事件后被触发的合成鼠标事件,以防止重复行动.
-   屏幕阅读器相容性:功能如FakeMousedown FromScreenReader和FakeTouchstart FromScreenReader用于忽略屏幕阅读器的事件,增强可访问性.

## 许可证

这个项目根据麻省理工学院的许可证获得许可.

通过使用"Foblex Drag工具箱",您可以简化在您的Angular应用程序中复杂的拖放交互的实现,确保不同设备和输入类型之间的行为一致.

## 常见问题

### @foblex/drag-toolkit 是什么？

TypeScript 库为 Angular 应用程序执行拖放功能提供基础类和公用设备,同时支持鼠标和触摸事件,并设计用于与 Angular 的 NgZone 工作或不工作\(无区应用程序\)

### 如何安装 @foblex/drag-toolkit？

在项目目录运行 npm install @foblex/drag-toolkit，或使用 pnpm add / yarn add / bun add。

### @foblex/drag-toolkit 支持 TypeScript 吗？

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

### @foblex/drag-toolkit 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @foblex/drag-toolkit 可以商用吗？

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

### @foblex/drag-toolkit 的下载量有多少？

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

### @foblex/drag-toolkit 还在维护吗？

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