@angular/cdk/drag-drop

DragRef

클래스

드래그 가능한 항목의 참조입니다. 항목을 조작하거나 해제하는 데 사용합니다.

API

    
      class DragRef<T = any> {}

constructor

DragRef<T>

@paramelementHTMLElement | ElementRef<HTMLElement>

@param_configDragRefConfig

@param_documentDocument

@param_ngZoneNgZone

@param_viewportRulerViewportRuler

@param_dragDropRegistryDragDropRegistry

@param_rendererRenderer2

@returnsDragRef<T>

lockAxis

"x" | "y" | null

드래그가 제한되는 축입니다.

dragStartDelay

number | { touch: number; mouse: number; }

사용자가 포인터를 누른 후 엘리먼트의 드래그를 시작하기까지 기다릴 시간(밀리초)입니다.

previewClass

string | string[] | undefined

미리보기 엘리먼트에 추가할 클래스입니다.

scale

number

드래그하는 엘리먼트의 부모에 scale 변환이 적용되어 있으면 드래그 시작 시 위치가 어긋날 수 있습니다. 이 입력으로 CDK에 배율을 알려주세요.

disabled

boolean

이 엘리먼트의 드래그 시작을 비활성화할지 여부입니다.

disabled

boolean

beforeStarted

Subject<void>

드래그 동작을 준비하는 동안 발생합니다.

started

Subject<{ source: DragRef<any>; event: MouseEvent | TouchEvent; }>

사용자가 항목의 드래그를 시작할 때 발생합니다.

released

Subject<{ source: DragRef<any>; event: MouseEvent | TouchEvent; }>

사용자가 드래그 항목을 놓은 후 애니메이션이 시작되기 전에 발생합니다.

ended

Subject<{ source: DragRef<any>; distance: Point; dropPoint: Point; event: MouseEvent | TouchEvent; }>

사용자가 컨테이너 안에서 항목의 드래그를 중단할 때 발생합니다.

entered

Subject<{ container: DropListRef<any>; item: DragRef<any>; currentIndex: number; }>

사용자가 항목을 새 컨테이너로 옮겼을 때 발생합니다.

exited

Subject<{ container: DropListRef<any>; item: DragRef<any>; }>

사용자가 항목을 다른 컨테이너로 드래그하여 원래 컨테이너에서 제거할 때 발생합니다.

dropped

Subject<{ previousIndex: number; currentIndex: number; item: DragRef<any>; container: DropListRef<any>; previousContainer: DropListRef<any>; distance: Point; dropPoint: Point; isPointerOverContainer: boolean; event: MouseEvent | TouchEvent; }>

사용자가 컨테이너 안에 항목을 놓을 때 발생합니다.

moved

Observable<{ source: DragRef<any>; pointerPosition: { x: number; y: number; }; event: MouseEvent | TouchEvent; distance: Point; delta: { x: 0 | 1 | -1; y: 0 | 1 | -1; }; }>

사용자가 항목을 드래그하는 동안 발생합니다. 드래그한 픽셀마다 발생하므로 주의해서 사용하세요.

data

T

드래그 항목에 첨부할 수 있는 임의의 데이터입니다.

constrainPosition

DragConstrainPosition | undefined

드래그하는 동안 항목의 위치를 제한하는 로직을 사용자 정의할 수 있는 함수입니다. 페이지에서 사용자 포인터의 현재 위치를 나타내는 점, 드래그 중인 항목의 참조와 크기를 인수로 받습니다. 항목을 렌더링할 위치를 나타내는 점을 반환해야 합니다.

getPlaceholderElement

HTMLElement

현재 엘리먼트를 드래그하는 동안 플레이스홀더로 사용하는 엘리먼트를 반환합니다.

@returnsHTMLElement

getRootElement

HTMLElement

드래그 가능한 루트 엘리먼트를 반환합니다.

@returnsHTMLElement

getVisibleElement

HTMLElement

현재 표시되는 드래그 항목의 엘리먼트를 가져옵니다. 드래그 중이면 플레이스홀더이며, 그렇지 않으면 루트 엘리먼트입니다.

@returnsHTMLElement

withHandles

this

엘리먼트를 드래그하는 데 사용할 핸들을 등록합니다.

@paramhandles(HTMLElement | ElementRef<HTMLElement>)[]

@returnsthis

withPreviewTemplate

this

드래그 미리보기에 사용할 템플릿을 등록합니다.

@paramtemplateDragPreviewTemplate<any> | null

미리보기를 생성할 템플릿입니다.

@returnsthis

withPlaceholderTemplate

this

드래그 플레이스홀더에 사용할 템플릿을 등록합니다.

@paramtemplateDragHelperTemplate<any> | null

플레이스홀더를 생성할 템플릿입니다.

@returnsthis

withRootElement

this

드래그에 사용할 다른 루트 엘리먼트를 설정합니다. 루트 엘리먼트는 사용자가 드래그하는 동안 이동하는 엘리먼트입니다. 직접 접근할 수 없는 엘리먼트에 드래그 기능을 활성화할 때 다른 루트 엘리먼트를 지정하면 유용합니다.

@paramrootElementHTMLElement | ElementRef<HTMLElement>

@returnsthis

withBoundaryElement

this

드래그 가능한 항목의 위치를 제한할 경계 엘리먼트입니다.

@paramboundaryElementHTMLElement | ElementRef<HTMLElement> | null

@returnsthis

withParent

this

이 참조를 포함하는 부모 참조를 설정합니다.

@paramparentDragRef<unknown> | null

@returnsthis

dispose

void

DOM 엘리먼트에서 드래그 기능을 제거합니다.

@returnsvoid

isDragging

boolean

엘리먼트가 현재 드래그 중인지 확인합니다.

@returnsboolean

reset

void

독립적인 드래그 항목을 초기 위치로 되돌립니다.

@returnsvoid

resetToBoundary

void

드래그 항목을 경계 엘리먼트의 끝으로 이동합니다.

@returnsvoid

disableHandle

void

핸들을 비활성화합니다. 비활성화된 핸들은 드래그를 가로채 중단시킵니다.

@paramhandleHTMLElement

비활성화할 핸들 엘리먼트입니다.

@returnsvoid

enableHandle

void

비활성화된 핸들을 활성화합니다.

@paramhandleHTMLElement

활성화할 핸들 엘리먼트입니다.

@returnsvoid

withDirection

this

드래그 가능한 항목의 레이아웃 방향을 설정합니다.

@paramdirectionDirection

@returnsthis

getFreeDragPosition

Readonly<Point>

드롭 컨테이너 밖에 있는 드래그 가능한 항목의 현재 위치를 픽셀 단위로 가져옵니다.

@returnsReadonly<Point>

setFreeDragPosition

this

드롭 컨테이너 밖에 있는 드래그 가능한 항목의 현재 위치를 픽셀 단위로 설정합니다.

@paramvaluePoint

설정할 새 위치입니다.

@returnsthis

withPreviewContainer

this

미리보기 엘리먼트를 삽입할 컨테이너를 설정합니다.

@paramvaluePreviewContainer

미리보기를 삽입할 컨테이너입니다.

@returnsthis