Foblex 拖放工具箱

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

概览

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

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

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

安装

通过 npm 安装库 :

  npm install @foblex/drag-toolkit

使用量

创建自定义拖放组件

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

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:

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应用程序中复杂的拖放交互的实现,确保不同设备和输入类型之间的行为一致.