@angular/cdk
Version:
Angular Material Component Development Kit
150 lines (149 loc) • 6.5 kB
TypeScript
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import { ElementRef, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core';
import { Directionality } from '@angular/cdk/bidi';
import { CdkDrag } from './drag';
import { DragDropRegistry } from './drag-drop-registry';
import { CdkDragDrop, CdkDragEnter, CdkDragExit } from './drag-events';
/** Container that wraps a set of draggable items. */
export declare class CdkDropList<T = any> implements OnInit, OnDestroy {
element: ElementRef<HTMLElement>;
private _dragDropRegistry;
private _dir?;
/** Draggable items in the container. */
_draggables: QueryList<CdkDrag>;
/**
* Other draggable containers that this container is connected to and into which the
* container's items can be transferred. Can either be references to other drop containers,
* or their unique IDs.
*/
connectedTo: (CdkDropList | string)[] | CdkDropList | string;
/** Arbitrary data to attach to this container. */
data: T;
/** Direction in which the list is oriented. */
orientation: 'horizontal' | 'vertical';
/**
* Unique ID for the drop zone. Can be used as a reference
* in the `connectedTo` of another `CdkDropList`.
*/
id: string;
/** Locks the position of the draggable elements inside the container along the specified axis. */
lockAxis: 'x' | 'y';
/**
* Function that is used to determine whether an item
* is allowed to be moved into a drop container.
*/
enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean;
/** Emits when the user drops an item inside the container. */
dropped: EventEmitter<CdkDragDrop<T, any>>;
/**
* Emits when the user has moved a new drag item into this container.
*/
entered: EventEmitter<CdkDragEnter<T>>;
/**
* Emits when the user removes an item from the container
* by dragging it into another container.
*/
exited: EventEmitter<CdkDragExit<T>>;
constructor(element: ElementRef<HTMLElement>, _dragDropRegistry: DragDropRegistry<CdkDrag, CdkDropList<T>>, _dir?: Directionality | undefined);
ngOnInit(): void;
ngOnDestroy(): void;
/** Whether an item in the container is being dragged. */
_dragging: boolean;
/** Cache of the dimensions of all the items and the sibling containers. */
private _positionCache;
/**
* Draggable items that are currently active inside the container. Includes the items
* from `_draggables`, as well as any items that have been dragged in, but haven't
* been dropped yet.
*/
private _activeDraggables;
/**
* Keeps track of the item that was last swapped with the dragged item, as
* well as what direction the pointer was moving in when the swap occured.
*/
private _previousSwap;
/** Starts dragging an item. */
start(): void;
/**
* Drops an item into this container.
* @param item Item being dropped into the container.
* @param currentIndex Index at which the item should be inserted.
* @param previousContainer Container from which the item got dragged in.
*/
drop(item: CdkDrag, currentIndex: number, previousContainer: CdkDropList): void;
/**
* Emits an event to indicate that the user moved an item into the container.
* @param item Item that was moved into the container.
* @param pointerX Position of the item along the X axis.
* @param pointerY Position of the item along the Y axis.
*/
enter(item: CdkDrag, pointerX: number, pointerY: number): void;
/**
* Removes an item from the container after it was dragged into another container by the user.
* @param item Item that was dragged out.
*/
exit(item: CdkDrag): void;
/**
* Figures out the index of an item in the container.
* @param item Item whose index should be determined.
*/
getItemIndex(item: CdkDrag): number;
/**
* Sorts an item inside the container based on its position.
* @param item Item to be sorted.
* @param pointerX Position of the item along the X axis.
* @param pointerY Position of the item along the Y axis.
* @param pointerDeta Direction in which the pointer is moving along each axis.
*/
_sortItem(item: CdkDrag, pointerX: number, pointerY: number, pointerDelta: {
x: number;
y: number;
}): void;
/**
* Figures out whether an item should be moved into a sibling
* drop container, based on its current position.
* @param item Drag item that is being moved.
* @param x Position of the item along the X axis.
* @param y Position of the item along the Y axis.
*/
_getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number): CdkDropList | null;
/**
* Checks whether an item that started in this container can be returned to it,
* after it was moved out into another container.
* @param item Item that is being checked.
* @param x Position of the item along the X axis.
* @param y Position of the item along the Y axis.
*/
_canReturnItem(item: CdkDrag, x: number, y: number): boolean;
/** Refreshes the position cache of the items and sibling containers. */
private _cachePositions;
/** Resets the container to its initial state. */
private _reset;
/**
* Updates the top/left positions of a `ClientRect`, as well as their bottom/right counterparts.
* @param clientRect `ClientRect` that should be updated.
* @param top Amount to add to the `top` position.
* @param left Amount to add to the `left` position.
*/
private _adjustClientRect;
/**
* Gets the index of an item in the drop container, based on the position of the user's pointer.
* @param item Item that is being sorted.
* @param pointerX Position of the user's pointer along the X axis.
* @param pointerY Position of the user's pointer along the Y axis.
* @param delta Direction in which the user is moving their pointer.
*/
private _getItemIndexFromPointerPosition;
/**
* Checks whether the pointer coordinates are close to the drop container.
* @param pointerX Coordinates along the X axis.
* @param pointerY Coordinates along the Y axis.
*/
private _isPointerNearDropContainer;
}