skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(drag-drop): add service for attaching drag&drop to arbitrary DOM nodes (#14437)

Browse Source 
* Adds the  `DragDrop` service that simplifies the construction logic for `DragRef` and `DropListRef` and allows consumers to attach drag&drop functionality to arbitrary DOM nodes, rather than having to go through the directives.
* Reworks `DragRef` and `DragDropRef` to make them easier to construct.
* Normalizes some of the instances where some parameters only accept an `ElementRef`, whereas others accept `ElementRef | HTMLElement`.
This commit is contained in:
Kristiyan Kostadinov
2019-01-25 18:07:15 +01:00
committed by Andrew Seguin
parent e66131744a
commit 5a18ea61e5
11 changed files with 423 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/public_api_guard/cdk/drag-drop.d.ts
Vendored
+131 -6
View File
@@ -27,7 +27,8 @@ export declare class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDes
started: EventEmitter<CdkDragStart>;
constructor(
element: ElementRef<HTMLElement>,
dropContainer: CdkDropList, _document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>, _config: DragRefConfig, _dir: Directionality);
dropContainer: CdkDropList, _document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, viewportRuler: ViewportRuler, dragDropRegistry: DragDropRegistry<DragRef, DropListRef>, config: DragRefConfig, _dir: Directionality,
dragDrop?: DragDrop);
getPlaceholderElement(): HTMLElement;
getRootElement(): HTMLElement;
ngAfterViewInit(): void;
@@ -111,7 +112,7 @@ export interface CdkDragStart<T = any> {
source: CdkDrag<T>;
}
export declare class CdkDropList<T = any> implements CdkDropListContainer, OnDestroy {
export declare class CdkDropList<T = any> implements CdkDropListContainer, AfterContentInit, OnDestroy {
_draggables: QueryList<CdkDrag>;
_dropListRef: DropListRef<CdkDropList<T>>;
connectedTo: (CdkDropList | string)[] | CdkDropList | string;
@@ -126,7 +127,9 @@ export declare class CdkDropList<T = any> implements CdkDropListContainer, OnDes
lockAxis: 'x' | 'y';
orientation: 'horizontal' | 'vertical';
sorted: EventEmitter<CdkDragSortEvent<T>>;
constructor(element: ElementRef<HTMLElement>, dragDropRegistry: DragDropRegistry<DragRef, DropListRef>, _changeDetectorRef: ChangeDetectorRef, dir?: Directionality, _group?: CdkDropListGroup<CdkDropList<any>> | undefined, _document?: any);
constructor(
element: ElementRef<HTMLElement>, dragDropRegistry: DragDropRegistry<DragRef, DropListRef>, _changeDetectorRef: ChangeDetectorRef, _dir?: Directionality | undefined, _group?: CdkDropListGroup<CdkDropList<any>> | undefined, _document?: any,
dragDrop?: DragDrop);
_getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number): CdkDropListContainer | null;
_isOverContainer(x: number, y: number): boolean;
_sortItem(item: CdkDrag, pointerX: number, pointerY: number, pointerDelta: {
@@ -137,6 +140,7 @@ export declare class CdkDropList<T = any> implements CdkDropListContainer, OnDes
enter(item: CdkDrag, pointerX: number, pointerY: number): void;
exit(item: CdkDrag): void;
getItemIndex(item: CdkDrag): number;
ngAfterContentInit(): void;
ngOnDestroy(): void;
start(): void;
}
@@ -168,11 +172,14 @@ export declare class CdkDropListGroup<T> implements OnDestroy {
ngOnDestroy(): void;
}
export interface CdkDropListInternal extends CdkDropList {
}
export declare function copyArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
export declare class DragDrop {
constructor(_document: any, _ngZone: NgZone, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>);
createDrag<T = any>(element: ElementRef<HTMLElement> | HTMLElement, config?: DragRefConfig): DragRef<T>;
createDropList<T = any>(element: ElementRef<HTMLElement> | HTMLElement): DropListRef<T>;
}
export declare class DragDropModule {
}
@@ -193,6 +200,124 @@ export declare class DragDropRegistry<I, C extends {
stopDragging(drag: I): void;
}
export declare class DragRef<T = any> {
beforeStarted: Subject<void>;
data: T;
disabled: boolean;
dropped: Subject<{
previousIndex: number;
currentIndex: number;
item: DragRef<any>;
container: DropListRef;
previousContainer: DropListRef;
isPointerOverContainer: boolean;
}>;
ended: Subject<{
source: DragRef<any>;
}>;
entered: Subject<{
container: DropListRef;
item: DragRef<any>;
}>;
exited: Subject<{
container: DropListRef;
item: DragRef<any>;
}>;
lockAxis: 'x' | 'y';
moved: Observable<{
source: DragRef;
pointerPosition: {
x: number;
y: number;
};
event: MouseEvent | TouchEvent;
delta: {
x: -1 | 0 | 1;
y: -1 | 0 | 1;
};
}>;
released: Subject<{
source: DragRef<any>;
}>;
started: Subject<{
source: DragRef<any>;
}>;
constructor(element: ElementRef<HTMLElement> | HTMLElement, _config: DragRefConfig, _document: Document, _ngZone: NgZone, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>);
_withDropContainer(container: DropListRef): void;
disableHandle(handle: HTMLElement): void;
dispose(): void;
enableHandle(handle: HTMLElement): void;
getPlaceholderElement(): HTMLElement;
getRootElement(): HTMLElement;
isDragging(): boolean;
reset(): void;
withBoundaryElement(boundaryElement: ElementRef<HTMLElement> | HTMLElement | null): this;
withDirection(direction: Direction): this;
withHandles(handles: (HTMLElement | ElementRef<HTMLElement>)[]): this;
withPlaceholderTemplate(template: DragHelperTemplate | null): this;
withPreviewTemplate(template: DragHelperTemplate | null): this;
withRootElement(rootElement: ElementRef<HTMLElement> | HTMLElement): this;
}
export interface DragRefConfig {
dragStartThreshold: number;
pointerDirectionChangeThreshold: number;
}
export declare class DropListRef<T = any> {
beforeStarted: Subject<void>;
data: T;
disabled: boolean;
dropped: Subject<{
item: DragRef;
currentIndex: number;
previousIndex: number;
container: DropListRef<any>;
previousContainer: DropListRef<any>;
isPointerOverContainer: boolean;
}>;
readonly element: HTMLElement;
enterPredicate: (drag: DragRef, drop: DropListRef) => boolean;
entered: Subject<{
item: DragRef;
container: DropListRef<any>;
}>;
exited: Subject<{
item: DragRef;
container: DropListRef<any>;
}>;
id: string;
lockAxis: 'x' | 'y';
sorted: Subject<{
previousIndex: number;
currentIndex: number;
container: DropListRef<any>;
item: DragRef;
}>;
constructor(element: ElementRef<HTMLElement> | HTMLElement, _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>, _document: any);
_canReceive(item: DragRef, x: number, y: number): boolean;
_getSiblingContainerFromPosition(item: DragRef, x: number, y: number): DropListRef | undefined;
_isOverContainer(x: number, y: number): boolean;
_sortItem(item: DragRef, pointerX: number, pointerY: number, pointerDelta: {
x: number;
y: number;
}): void;
_startReceiving(sibling: DropListRef): void;
_stopReceiving(sibling: DropListRef): void;
connectedTo(connectedTo: DropListRef[]): this;
dispose(): void;
drop(item: DragRef, currentIndex: number, previousContainer: DropListRef, isPointerOverContainer: boolean): void;
enter(item: DragRef, pointerX: number, pointerY: number): void;
exit(item: DragRef): void;
getItemIndex(item: DragRef): number;
isDragging(): boolean;
isReceiving(): boolean;
start(): void;
withDirection(direction: Direction): this;
withItems(items: DragRef[]): this;
withOrientation(orientation: 'vertical' | 'horizontal'): this;
}
export declare function moveItemInArray<T = any>(array: T[], fromIndex: number, toIndex: number): void;
export declare function transferArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;