(cdkDropListDropped)="drop($event)"
[cdkDropListLockAxis]="axisLock"
[cdkDropListData]="ages">
-
+
{{item}}
@@ -53,7 +53,7 @@
Preferred Ages
(cdkDropListDropped)="drop($event)"
[cdkDropListLockAxis]="axisLock"
[cdkDropListData]="preferredAges">
-
+
{{item}}
@@ -66,6 +66,8 @@
Free dragging
Drag me around
+
+
Data
{{todo.join(', ')}}
@@ -86,6 +88,18 @@
Axis locking
+
+
Drag Preview Container
+
+ Drag preview should clone into
+
+ Global
+ Preview Container (HTMLElement)
+ Preview Container (ElementRef)
+
+
+
+
Drag start delay
diff --git a/src/dev-app/drag-drop/drag-drop-demo.scss b/src/dev-app/drag-drop/drag-drop-demo.scss
index ce97633fa757..74c09f8489c2 100644
--- a/src/dev-app/drag-drop/drag-drop-demo.scss
+++ b/src/dev-app/drag-drop/drag-drop-demo.scss
@@ -99,3 +99,11 @@ pre {
justify-content: center;
align-items: center;
}
+
+.demo-preview-container .cdk-drag-preview {
+ border: 2px solid #3f51b5;
+}
+
+.demo-list .cdk-drag-preview {
+ border: 2px solid #607d8b;
+}
diff --git a/src/dev-app/drag-drop/drag-drop-demo.ts b/src/dev-app/drag-drop/drag-drop-demo.ts
index a3b7eed54a2a..be96d73c3464 100644
--- a/src/dev-app/drag-drop/drag-drop-demo.ts
+++ b/src/dev-app/drag-drop/drag-drop-demo.ts
@@ -6,7 +6,13 @@
* found in the LICENSE file at https://angular.io/license
*/
-import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
+import {
+ Component,
+ ViewEncapsulation,
+ ChangeDetectionStrategy,
+ ViewChild,
+ ElementRef
+} from '@angular/core';
import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
@@ -19,8 +25,10 @@ import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DragAndDropDemo {
+ @ViewChild('previewContainer') previewContainerElementRef: ElementRef;
axisLock: 'x' | 'y';
dragStartDelay = 0;
+ dragPreviewContainer: 'global' | ElementRef | HTMLElement = 'global';
todo = [
'Go out for Lunch',
'Make a cool app',
diff --git a/tools/public_api_guard/cdk/drag-drop.d.ts b/tools/public_api_guard/cdk/drag-drop.d.ts
index 7422c8819f87..d5eaeb6cf631 100644
--- a/tools/public_api_guard/cdk/drag-drop.d.ts
+++ b/tools/public_api_guard/cdk/drag-drop.d.ts
@@ -36,6 +36,7 @@ export declare class CdkDrag implements AfterViewInit, OnChanges, OnDes
lockAxis: DragAxis;
moved: Observable>;
previewClass: string | string[];
+ previewContainer: 'global' | ElementRef | HTMLElement;
released: EventEmitter;
rootElementSelector: string;
started: EventEmitter;
@@ -54,7 +55,7 @@ export declare class CdkDrag implements AfterViewInit, OnChanges, OnDes
ngOnDestroy(): void;
reset(): void;
static ngAcceptInputType_disabled: BooleanInput;
- static ɵdir: i0.ɵɵDirectiveDefWithMeta, "[cdkDrag]", ["cdkDrag"], { "data": "cdkDragData"; "lockAxis": "cdkDragLockAxis"; "rootElementSelector": "cdkDragRootElement"; "boundaryElement": "cdkDragBoundary"; "dragStartDelay": "cdkDragStartDelay"; "freeDragPosition": "cdkDragFreeDragPosition"; "disabled": "cdkDragDisabled"; "constrainPosition": "cdkDragConstrainPosition"; "previewClass": "cdkDragPreviewClass"; }, { "started": "cdkDragStarted"; "released": "cdkDragReleased"; "ended": "cdkDragEnded"; "entered": "cdkDragEntered"; "exited": "cdkDragExited"; "dropped": "cdkDragDropped"; "moved": "cdkDragMoved"; }, ["_previewTemplate", "_placeholderTemplate", "_handles"]>;
+ static ɵdir: i0.ɵɵDirectiveDefWithMeta, "[cdkDrag]", ["cdkDrag"], { "data": "cdkDragData"; "lockAxis": "cdkDragLockAxis"; "rootElementSelector": "cdkDragRootElement"; "boundaryElement": "cdkDragBoundary"; "dragStartDelay": "cdkDragStartDelay"; "freeDragPosition": "cdkDragFreeDragPosition"; "disabled": "cdkDragDisabled"; "constrainPosition": "cdkDragConstrainPosition"; "previewClass": "cdkDragPreviewClass"; "previewContainer": "cdkDragPreviewContainer"; }, { "started": "cdkDragStarted"; "released": "cdkDragReleased"; "ended": "cdkDragEnded"; "entered": "cdkDragEntered"; "exited": "cdkDragExited"; "dropped": "cdkDragDropped"; "moved": "cdkDragMoved"; }, ["_previewTemplate", "_placeholderTemplate", "_handles"]>;
static ɵfac: i0.ɵɵFactoryDef, [null, { optional: true; skipSelf: true; }, null, null, null, { optional: true; }, { optional: true; }, null, null, { optional: true; self: true; }]>;
}
@@ -315,6 +316,7 @@ export declare class DragRef {
withDirection(direction: Direction): this;
withHandles(handles: (HTMLElement | ElementRef)[]): this;
withPlaceholderTemplate(template: DragHelperTemplate | null): this;
+ withPreviewContainer(previewContainer: HTMLElement | ElementRef | null): this;
withPreviewTemplate(template: DragPreviewTemplate | null): this;
withRootElement(rootElement: ElementRef | HTMLElement): this;
}