CdkDropList — Angular

Контейнер, содержащий набор перетаскиваемых элементов.

API

class CdkDropList<T = any> implements OnDestroy {
  element: any;
  connectedTo: string | CdkDropList<any> | (string | CdkDropList<any>)[];
  data: T;
  orientation: DropListOrientation;
  id: string;
  lockAxis: DragAxis | null;
   get disabled(): boolean;
  sortingDisabled: boolean;
  enterPredicate: (drag: CdkDrag<any>, drop: CdkDropList<any>) => boolean;
  sortPredicate: (index: number, drag: CdkDrag<any>, drop: CdkDropList<any>) => boolean;
  autoScrollDisabled: boolean;
  autoScrollStep: NumberInput;
  elementContainerSelector: string | null;
  hasAnchor: boolean;
  readonly dropped: EventEmitter<CdkDragDrop<T, any, any>>;
  readonly entered: EventEmitter<CdkDragEnter<T, T>>;
  readonly exited: EventEmitter<CdkDragExit<T, T>>;
  readonly sorted: EventEmitter<CdkDragSortEvent<T, T>>;
  addItem(item: CdkDrag<any>): void;
  removeItem(item: CdkDrag<any>): void;
  getSortedItems(): CdkDrag<any>[];
}

element

any

connectedTo

string | CdkDropList<any> | (string | CdkDropList<any>)[]

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

data

T

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

orientation

DropListOrientation

Направление расположения списка.

id

string

Уникальный идентификатор зоны перетаскивания. Его можно использовать как ссылку в connectedTo другого CdkDropList.

lockAxis

DragAxis | null

Ограничивает перемещение перетаскиваемых элементов внутри контейнера указанной осью.

disabled

boolean

Отключает возможность начать перетаскивание из этого контейнера.

disabled

boolean

sortingDisabled

boolean

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

enterPredicate

(drag: CdkDrag<any>, drop: CdkDropList<any>) => boolean

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

sortPredicate

(index: number, drag: CdkDrag<any>, drop: CdkDropList<any>) => boolean

Функция, определяющая, можно ли поместить элемент на определённую позицию при сортировке.

autoScrollDisabled

boolean

Отключает автоматическую прокрутку представления, когда указатель пользователя приближается к краям.

autoScrollStep

NumberInput

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

elementContainerSelector

string | null

Селектор, используемый для определения альтернативного контейнера элементов для списка перетаскивания. Передача альтернативного контейнера полезна в случаях, когда нельзя управлять родительским узлом перетаскиваемых элементов в списке (например, из-за проекции содержимого). Это позволяет использовать конструкции вроде:

<div cdkDropList cdkDropListElementContainer=".inner">
  <div class="inner">
    <div cdkDrag></div>
  </div>
</div>

hasAnchor

boolean

По умолчанию, когда элемент покидает исходный контейнер, его заполнитель перемещается в новый контейнер. Если это не подходит для вашего сценария использования, включите этот параметр: он создаст копию заполнителя и оставит её в исходном контейнере. Если элемент вернётся в исходный контейнер, элемент-якорь будет удалён автоматически.

Стили для скопированного заполнителя можно задать, используя класс cdk-drag-anchor.

Этот параметр полезно использовать вместе с cdkDropListSortingDisabled для реализации поведения копирования в списке перетаскивания.

dropped

EventEmitter<CdkDragDrop<T, any, any>>

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

entered

EventEmitter<CdkDragEnter<T, T>>

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

exited

EventEmitter<CdkDragExit<T, T>>

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

sorted

EventEmitter<CdkDragSortEvent<T, T>>

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

addItem

void

Регистрирует элемент в списке для перетаскивания.

@paramitemCdkDrag<any>

@returnsvoid

removeItem

void

Удаляет элемент из списка для перетаскивания.

@paramitemCdkDrag<any>

@returnsvoid

getSortedItems

CdkDrag<any>[]

Возвращает зарегистрированные в списке элементы, отсортированные по их положению в DOM.

@returnsCdkDrag<any>[]

ngOnDestroy

void

@returnsvoid