CdkDrag — Angular | Spec-Zone.ru

Элемент, который можно перемещать внутри контейнера CdkDropList.

API

class CdkDrag<T = any> implements AfterViewInit ,OnChanges ,OnDestroy {
  element: any;
  dropContainer: any;
  data: T;
  lockAxis: DragAxis | null;
  rootElementSelector: string;
  boundaryElement: any;
  dragStartDelay: DragStartDelay;
  freeDragPosition: Point;
   get disabled(): boolean;
  constrainPosition?: DragConstrainPosition | undefined;
  previewClass: string | string[];
  previewContainer: any;
  scale: number;
  readonly started: EventEmitter<CdkDragStart<any>>;
  readonly released: EventEmitter<CdkDragRelease<any>>;
  readonly ended: EventEmitter<CdkDragEnd<any>>;
  readonly entered: EventEmitter<CdkDragEnter<any, any>>;
  readonly exited: EventEmitter<CdkDragExit<any, any>>;
  readonly dropped: EventEmitter<CdkDragDrop<any, any, any>>;
  readonly moved: Observable<CdkDragMove<T>>;
  getPlaceholderElement(): HTMLElement;
  getRootElement(): HTMLElement;
  reset(): void;
  resetToBoundary(): void;
  getFreeDragPosition(): Readonly<Point>;
  setFreeDragPosition(value: Point): void;
}

element

any

dropContainer

any

data

T

Произвольные данные, связанные с этим экземпляром перетаскивания.

lockAxis

DragAxis | null

Блокирует перемещение перетаскиваемого элемента вдоль указанной оси.

rootElementSelector

string

Селектор, используемый для определения корневого перетаскиваемого элемента: поиск начинается с элемента cdkDrag и продолжается вверх по DOM. Альтернативный корневой элемент удобно указывать, если нужно включить перетаскивание элемента, к которому у вас может не быть доступа.

boundaryElement

any

Узел или селектор, используемый для определения элемента, границами которого будет ограничено положение перетаскиваемого элемента. Если передана строка, она будет использоваться как селектор: поиск совпадения начнётся с родительского элемента и продолжится вверх по DOM.

dragStartDelay

DragStartDelay

Количество миллисекунд, которое нужно подождать после нажатия указателем пользователя, прежде чем начать перетаскивание элемента.

freeDragPosition

Point

Задаёт положение элемента CdkDrag, находящегося вне контейнера для перетаскивания. Можно использовать, чтобы восстановить положение элемента для вернувшегося пользователя.

disabled

boolean

Отключено ли начало перетаскивания этого элемента.

disabled

boolean

constrainPosition

DragConstrainPosition | undefined

Функция для настройки логики ограничения положения перетаскиваемого элемента. Вызывается с точкой, содержащей текущее положение указателя пользователя на странице, ссылкой на перетаскиваемый элемент и его размерами. Функция должна возвращать точку, описывающую место, где следует отобразить элемент.

previewClass

string | string[]

Класс, добавляемый к элементу предпросмотра.

previewContainer

any

Настраивает место, куда будет помещён предпросмотр элемента. Настройку можно задать глобально с помощью CDK_DROP_LIST. Возможные значения:

global — предпросмотр будет помещён в конец <body>. Это избавляет от необходимости беспокоиться о overflow: hidden или z-index, однако элемент не сохранит унаследованные стили.
parent — предпросмотр будет помещён в родительский элемент перетаскиваемого элемента. Это позволяет сохранить унаследованные стили, однако предпросмотр может быть обрезан из-за overflow: hidden или не отображаться из-за z-index. Кроме того, предпросмотр повлияет на такие селекторы, как :nth-child, и на некоторые конфигурации flexbox.
ElementRef<HTMLElement> | HTMLElement — предпросмотр будет помещён в указанный элемент. Преимущества и недостатки те же, что и у parent.

scale

number

Если у родительского элемента перетаскиваемого элемента есть преобразование scale, при начале перетаскивания положение элемента может быть определено неверно. Используйте это свойство, чтобы сообщить CDK масштаб.

started

EventEmitter<CdkDragStart<any>>

Вызывается, когда пользователь начинает перетаскивать элемент.

released

EventEmitter<CdkDragRelease<any>>

Вызывается, когда пользователь отпускает перетаскиваемый элемент, до начала анимации.

ended

EventEmitter<CdkDragEnd<any>>

Вызывается, когда пользователь прекращает перетаскивание элемента в контейнере.

entered

EventEmitter<CdkDragEnter<any, any>>

Вызывается, когда пользователь перемещает элемент в новый контейнер.

exited

EventEmitter<CdkDragExit<any, any>>

Вызывается, когда пользователь перемещает элемент из его контейнера в другой контейнер.

dropped

EventEmitter<CdkDragDrop<any, any, any>>

Вызывается, когда пользователь помещает элемент в контейнер.

moved

Observable<CdkDragMove<T>>

Вызывается во время перетаскивания элемента пользователем. Используйте с осторожностью: событие будет срабатывать при каждом перемещении указателя на один пиксель.

getPlaceholderElement

HTMLElement

Возвращает элемент, используемый в качестве заполнителя во время перетаскивания текущего элемента.

@returnsHTMLElement

getRootElement

HTMLElement

Возвращает корневой перетаскиваемый элемент.

@returnsHTMLElement

reset

void

Возвращает отдельный перетаскиваемый элемент в исходное положение.

@returnsvoid

resetToBoundary

void

Перемещает перетаскиваемый элемент к границе ограничивающего элемента.

@returnsvoid

getFreeDragPosition

Readonly<Point>

Возвращает координаты перетаскиваемого элемента в пикселях, если он находится вне контейнера для перетаскивания.

@returnsReadonly<Point>

setFreeDragPosition

void

Задаёт текущее положение перетаскиваемого элемента в пикселях, если он находится вне контейнера для перетаскивания.

@paramvaluePoint

Новое положение.

@returnsvoid

ngAfterViewInit

void

@returnsvoid

ngOnChanges

void

@paramchangesSimpleChanges<this>

@returnsvoid

ngOnDestroy

void

@returnsvoid