From 94209dae443de41fac09681de32b437c416bcf49 Mon Sep 17 00:00:00 2001 From: Joey Perrott Date: Mon, 15 Oct 2018 10:39:45 -0700 Subject: [PATCH] chore(drag-drop): rename cdkDrop to cdkDropList --- src/cdk/drag-drop/drag-drop-module.ts | 6 +- src/cdk/drag-drop/drag-drop-registry.spec.ts | 12 +-- src/cdk/drag-drop/drag-drop.md | 42 +++++----- src/cdk/drag-drop/drag-events.ts | 10 +-- src/cdk/drag-drop/drag.spec.ts | 76 +++++++++---------- src/cdk/drag-drop/drag.ts | 9 ++- ...op-container.ts => drop-list-container.ts} | 10 ++- src/cdk/drag-drop/{drop.ts => drop-list.ts} | 50 ++++++------ src/cdk/drag-drop/public-api.ts | 4 +- src/demo-app/drag-drop/drag-drop-demo.html | 34 ++++----- src/demo-app/drag-drop/drag-drop-demo.scss | 6 +- src/demo-app/drag-drop/drag-drop-demo.ts | 8 +- ...dk-drag-drop-connected-sorting-example.css | 2 +- ...k-drag-drop-connected-sorting-example.html | 20 ++--- .../cdk-drag-drop-custom-preview-example.css | 2 +- .../cdk-drag-drop-custom-preview-example.html | 2 +- ...k-drag-drop-horizontal-sorting-example.css | 2 +- ...-drag-drop-horizontal-sorting-example.html | 2 +- .../cdk-drag-drop-sorting-example.css | 2 +- .../cdk-drag-drop-sorting-example.html | 2 +- 20 files changed, 152 insertions(+), 149 deletions(-) rename src/cdk/drag-drop/{drop-container.ts => drop-list-container.ts} (90%) rename src/cdk/drag-drop/{drop.ts => drop-list.ts} (93%) diff --git a/src/cdk/drag-drop/drag-drop-module.ts b/src/cdk/drag-drop/drag-drop-module.ts index f682197a6ee2..c0f95b360140 100644 --- a/src/cdk/drag-drop/drag-drop-module.ts +++ b/src/cdk/drag-drop/drag-drop-module.ts @@ -7,7 +7,7 @@ */ import {NgModule} from '@angular/core'; -import {CdkDrop} from './drop'; +import {CdkDropList} from './drop-list'; import {CdkDrag} from './drag'; import {CdkDragHandle} from './drag-handle'; import {CdkDragPreview} from './drag-preview'; @@ -15,14 +15,14 @@ import {CdkDragPlaceholder} from './drag-placeholder'; @NgModule({ declarations: [ - CdkDrop, + CdkDropList, CdkDrag, CdkDragHandle, CdkDragPreview, CdkDragPlaceholder, ], exports: [ - CdkDrop, + CdkDropList, CdkDrag, CdkDragHandle, CdkDragPreview, diff --git a/src/cdk/drag-drop/drag-drop-registry.spec.ts b/src/cdk/drag-drop/drag-drop-registry.spec.ts index 29b2b8d2f74c..66a9ad9b4011 100644 --- a/src/cdk/drag-drop/drag-drop-registry.spec.ts +++ b/src/cdk/drag-drop/drag-drop-registry.spec.ts @@ -9,12 +9,12 @@ import { import {DragDropRegistry} from './drag-drop-registry'; import {DragDropModule} from './drag-drop-module'; import {CdkDrag} from './drag'; -import {CdkDrop} from './drop'; +import {CdkDropList} from './drop-list'; describe('DragDropRegistry', () => { let fixture: ComponentFixture; let testComponent: SimpleDropZone; - let registry: DragDropRegistry; + let registry: DragDropRegistry; beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ @@ -26,7 +26,7 @@ describe('DragDropRegistry', () => { testComponent = fixture.componentInstance; fixture.detectChanges(); - inject([DragDropRegistry], (c: DragDropRegistry) => { + inject([DragDropRegistry], (c: DragDropRegistry) => { registry = c; })(); })); @@ -159,16 +159,16 @@ describe('DragDropRegistry', () => { @Component({ template: ` -
+
{{item}}
-
+
` }) class SimpleDropZone { @ViewChildren(CdkDrag) dragItems: QueryList; - @ViewChildren(CdkDrop) dropInstances: QueryList; + @ViewChildren(CdkDropList) dropInstances: QueryList; items = ['Zero', 'One', 'Two', 'Three']; showDuplicateContainer = false; } diff --git a/src/cdk/drag-drop/drag-drop.md b/src/cdk/drag-drop/drag-drop.md index b251d8af4958..50cfe134f764 100644 --- a/src/cdk/drag-drop/drag-drop.md +++ b/src/cdk/drag-drop/drag-drop.md @@ -6,62 +6,62 @@ in addition to horizontal lists and locking along an axis. ### Getting started Start by importing `DragDropModule` into the `NgModule` where you want to use drag-and-drop features. You can now add the `cdkDrag` directive to elements to make them draggable. When -outside of a `cdkDrop` element, draggable elements can be freely moved around the page. -You can add `cdkDrop` elements to constrain where elements may be dropped. +outside of a `cdkDropList` element, draggable elements can be freely moved around the page. +You can add `cdkDropList` elements to constrain where elements may be dropped. ### Reordering lists -Adding `cdkDrop` around a set of `cdkDrag` elements groups the draggables into a +Adding `cdkDropList` around a set of `cdkDrag` elements groups the draggables into a reorderable collection. Items will automatically rearrange as an element moves. Note -that this will *not* update your data model; you can listen to the `cdkDropDropped` event to +that this will *not* update your data model; you can listen to the `cdkDropListDropped` event to update the data model once the user finishes dragging. ### Transferring items between lists -The `cdkDrop` directive supports transferring dragged items between connected drop zones. -You can connect one or more `cdkDrop` instances together by setting the `cdkDropConnectedTo` +The `cdkDropList` directive supports transferring dragged items between connected drop zones. +You can connect one or more `cdkDropList` instances together by setting the `cdkDropListConnectedTo` property. -Note that `cdkDropConnectedTo` works both with a direct reference to another `cdkDrop`, or by +Note that `cdkDropListConnectedTo` works both with a direct reference to another `cdkDropList`, or by referencing the `id` of another drop container: ```html -
-
+
+
-
-
+
+
``` ### Attaching data -You can associate some arbitrary data with both `cdkDrag` and `cdkDrop` by setting `cdkDragData` -or `cdkDropData`, respectively. Events fired from both directives include this data, allowing +You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by setting `cdkDragData` +or `cdkDropListData`, respectively. Events fired from both directives include this data, allowing you to easily identify the origin of the drag or drop interaction. ```html -
+
``` ### Styling -The `cdkDrag` and `cdkDrop` directive include only those styles strictly necessary for +The `cdkDrag` and `cdkDropList` directive include only those styles strictly necessary for functionality. The application can then customize the elements by styling CSS classes added by the directives: | Selector | Description | |---------------------|--------------------------------------------------------------------------| -| `.cdk-drop` | Corresponds to the `cdkDrop` container. | +| `.cdk-drop-list` | Corresponds to the `cdkDropList` container. | | `.cdk-drag` | Corresponds to a `cdkDrag` instance. | | `.cdk-drag-preview` | This is the element that will be rendered next to the user's cursor as they're dragging an item in a sortable list. By default the element looks exactly like the element that is being dragged. | -| `.cdk-drag-placeholder` | This is element that will be shown instead of the real element as it's being dragged inside a `cdkDrop`. By default this will look exactly like the element that is being sorted. | -| `.cdk-drop-dragging` | A class that is added to `cdkDrop` while the user is dragging an item. | +| `.cdk-drag-placeholder` | This is element that will be shown instead of the real element as it's being dragged inside a `cdkDropList`. By default this will look exactly like the element that is being sorted. | +| `.cdk-drop-dragging` | A class that is added to `cdkDropList` while the user is dragging an item. | ### Animations The drag-and-drop module supports animations both while sorting an element inside a list, as well as @@ -73,7 +73,7 @@ following classes can be used for animations: through a list. * `.cdk-drag-animating` - This class is added to a `cdkDrag` when the user has stopped dragging. If you add a `transition` to it, the CDK will animate the element from its drop position to - the final position inside the `cdkDrop` container. + the final position inside the `cdkDropList` container. Example animations: @@ -105,14 +105,14 @@ This preview can be customized, though, by providing a custom template via `*cdk ### List orientation -The `cdkDrop` directive assumes that lists are vertical by default. This can be +The `cdkDropList` directive assumes that lists are vertical by default. This can be changed by setting the `orientation` property to `"horizontal". ### Restricting movement along an axis By default, `cdkDrag` allows free movement in all directions. To restrict dragging to a -specific axis, you can set `cdkDragLockAxis` on `cdkDrag` or `lockAxis` on `cdkDrop` +specific axis, you can set `cdkDragLockAxis` on `cdkDrag` or `lockAxis` on `cdkDropList` to either `"x"` or `"y"`. diff --git a/src/cdk/drag-drop/drag-events.ts b/src/cdk/drag-drop/drag-events.ts index b305720c8231..5024bba43dce 100644 --- a/src/cdk/drag-drop/drag-events.ts +++ b/src/cdk/drag-drop/drag-events.ts @@ -7,7 +7,7 @@ */ import {CdkDrag} from './drag'; -import {CdkDropContainer} from './drop-container'; +import {CdkDropListContainer} from './drop-list-container'; /** Event emitted when the user starts dragging a draggable. */ export interface CdkDragStart { @@ -24,7 +24,7 @@ export interface CdkDragEnd { /** Event emitted when the user moves an item into a new drop container. */ export interface CdkDragEnter { /** Container into which the user has moved the item. */ - container: CdkDropContainer; + container: CdkDropListContainer; /** Item that was removed from the container. */ item: CdkDrag; } @@ -35,7 +35,7 @@ export interface CdkDragEnter { */ export interface CdkDragExit { /** Container from which the user has a removed an item. */ - container: CdkDropContainer; + container: CdkDropListContainer; /** Item that was removed from the container. */ item: CdkDrag; } @@ -50,9 +50,9 @@ export interface CdkDragDrop { /** Item that is being dropped. */ item: CdkDrag; /** Container in which the item was dropped. */ - container: CdkDropContainer; + container: CdkDropListContainer; /** Container from which the item was picked up. Can be the same as the `container`. */ - previousContainer: CdkDropContainer; + previousContainer: CdkDropListContainer; } /** Event emitted as the user is dragging a draggable item. */ diff --git a/src/cdk/drag-drop/drag.spec.ts b/src/cdk/drag-drop/drag.spec.ts index f5fc896195c4..210f0783beb7 100644 --- a/src/cdk/drag-drop/drag.spec.ts +++ b/src/cdk/drag-drop/drag.spec.ts @@ -22,7 +22,7 @@ import {Directionality} from '@angular/cdk/bidi'; import {CdkDrag, CDK_DRAG_CONFIG, CdkDragConfig} from './drag'; import {CdkDragDrop} from './drag-events'; import {moveItemInArray} from './drag-utils'; -import {CdkDrop} from './drop'; +import {CdkDropList} from './drop-list'; import {CdkDragHandle} from './drag-handle'; const ITEM_HEIGHT = 25; @@ -478,11 +478,11 @@ describe('CdkDrag', () => { const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement; const dropZone = fixture.componentInstance.dropInstance; - expect(dropZone.element.nativeElement.classList).not.toContain('cdk-drop-dragging'); + expect(dropZone.element.nativeElement.classList).not.toContain('cdk-drop-list-dragging'); startDraggingViaMouse(fixture, item); - expect(dropZone.element.nativeElement.classList).toContain('cdk-drop-dragging'); + expect(dropZone.element.nativeElement.classList).toContain('cdk-drop-list-dragging'); dispatchMouseEvent(document, 'mouseup'); fixture.detectChanges(); @@ -1749,11 +1749,11 @@ class StandaloneDraggableWithMultipleHandles { @Component({ template: `
+ [cdkDropListData]="items" + (cdkDropListDropped)="droppedSpy($event)">
; - @ViewChild(CdkDrop) dropInstance: CdkDrop; + @ViewChild(CdkDropList) dropInstance: CdkDropList; items = ['Zero', 'One', 'Two', 'Three']; dropZoneId = 'items'; droppedSpy = jasmine.createSpy('dropped spy').and.callFake((event: CdkDragDrop) => { @@ -1778,7 +1778,7 @@ class DraggableInDropZone { styles: [ // Use inline blocks here to avoid flexbox issues and not to have to flip floats in rtl. ` - .cdk-drop { + .cdk-drop-list { display: block; width: 300px; background: pink; @@ -1794,17 +1794,17 @@ class DraggableInDropZone { `], template: `
+ cdkDropList + cdkDropListOrientation="horizontal" + [cdkDropListData]="items" + (cdkDropListDropped)="droppedSpy($event)">
{{item}}
` }) class DraggableInHorizontalDropZone { @ViewChildren(CdkDrag) dragItems: QueryList; - @ViewChild(CdkDrop) dropInstance: CdkDrop; + @ViewChild(CdkDropList) dropInstance: CdkDropList; items = ['Zero', 'One', 'Two', 'Three']; droppedSpy = jasmine.createSpy('dropped spy').and.callFake((event: CdkDragDrop) => { moveItemInArray(this.items, event.previousIndex, event.currentIndex); @@ -1813,7 +1813,7 @@ class DraggableInHorizontalDropZone { @Component({ template: ` -
+
{{item}} @@ -1823,7 +1823,7 @@ class DraggableInHorizontalDropZone { ` }) class DraggableInDropZoneWithCustomPreview { - @ViewChild(CdkDrop) dropInstance: CdkDrop; + @ViewChild(CdkDropList) dropInstance: CdkDropList; @ViewChildren(CdkDrag) dragItems: QueryList; items = ['Zero', 'One', 'Two', 'Three']; } @@ -1831,7 +1831,7 @@ class DraggableInDropZoneWithCustomPreview { @Component({ template: ` -
+
{{item}} @@ -1849,7 +1849,7 @@ class DraggableInDropZoneWithCustomPlaceholder { @Component({ encapsulation: ViewEncapsulation.None, styles: [` - .cdk-drop { + .cdk-drop-list { display: block; width: 100px; min-height: ${ITEM_HEIGHT}px; @@ -1864,27 +1864,27 @@ class DraggableInDropZoneWithCustomPlaceholder { `], template: `
+ cdkDropList + #todoZone="cdkDropList" + [cdkDropListData]="todo" + [cdkDropListConnectedTo]="[doneZone]" + (cdkDropListDropped)="droppedSpy($event)">
{{item}}
+ cdkDropList + #doneZone="cdkDropList" + [cdkDropListData]="done" + [cdkDropListConnectedTo]="[todoZone]" + (cdkDropListDropped)="droppedSpy($event)">
{{item}}
` }) class ConnectedDropZones implements AfterViewInit { @ViewChildren(CdkDrag) rawDragItems: QueryList; - @ViewChildren(CdkDrop) dropInstances: QueryList; + @ViewChildren(CdkDropList) dropInstances: QueryList; groupedDragItems: CdkDrag[][] = []; todo = ['Zero', 'One', 'Two', 'Three']; @@ -1924,7 +1924,7 @@ class DraggableWithAlternateRoot { @Component({ encapsulation: ViewEncapsulation.None, styles: [` - .cdk-drop { + .cdk-drop-list { display: block; width: 100px; min-height: ${ITEM_HEIGHT}px; @@ -1939,25 +1939,25 @@ class DraggableWithAlternateRoot { `], template: `
+ cdkDropList + #todoZone="cdkDropList" + [cdkDropListConnectedTo]="[doneZone]" + (cdkDropListDropped)="droppedSpy($event)">
One
+ cdkDropList + #doneZone="cdkDropList" + [cdkDropListConnectedTo]="[todoZone]" + (cdkDropListDropped)="droppedSpy($event)">
Two
` }) class ConnectedDropZonesWithSingleItems { @ViewChildren(CdkDrag) dragItems: QueryList; - @ViewChildren(CdkDrop) dropInstances: QueryList; + @ViewChildren(CdkDropList) dropInstances: QueryList; droppedSpy = jasmine.createSpy('dropped spy'); } diff --git a/src/cdk/drag-drop/drag.ts b/src/cdk/drag-drop/drag.ts index 9597b0131c0f..c6ee7806efdf 100644 --- a/src/cdk/drag-drop/drag.ts +++ b/src/cdk/drag-drop/drag.ts @@ -42,7 +42,7 @@ import { import {CdkDragHandle} from './drag-handle'; import {CdkDragPlaceholder} from './drag-placeholder'; import {CdkDragPreview} from './drag-preview'; -import {CDK_DROP_CONTAINER, CdkDropContainer} from './drop-container'; +import {CDK_DROP_LIST_CONTAINER, CdkDropListContainer} from './drop-list-container'; import {getTransformTransitionDurationInMs} from './transition-duration'; import {extendStyles, toggleNativeDragInteractions} from './drag-styling'; @@ -134,7 +134,7 @@ export class CdkDrag implements AfterViewInit, OnDestroy { private _hasMoved: boolean; /** Drop container in which the CdkDrag resided when dragging began. */ - private _initialContainer: CdkDropContainer; + private _initialContainer: CdkDropListContainer; /** Cached scroll position on the page when the element was picked up. */ private _scrollPosition: {top: number, left: number}; @@ -222,12 +222,13 @@ export class CdkDrag implements AfterViewInit, OnDestroy { /** Element that the draggable is attached to. */ public element: ElementRef, /** Droppable container that the draggable is a part of. */ - @Inject(CDK_DROP_CONTAINER) @Optional() @SkipSelf() public dropContainer: CdkDropContainer, + @Inject(CDK_DROP_LIST_CONTAINER) @Optional() @SkipSelf() + public dropContainer: CdkDropListContainer, @Inject(DOCUMENT) document: any, private _ngZone: NgZone, private _viewContainerRef: ViewContainerRef, private _viewportRuler: ViewportRuler, - private _dragDropRegistry: DragDropRegistry, CdkDropContainer>, + private _dragDropRegistry: DragDropRegistry, CdkDropListContainer>, @Inject(CDK_DRAG_CONFIG) private _config: CdkDragConfig, @Optional() private _dir: Directionality) { this._document = document; diff --git a/src/cdk/drag-drop/drop-container.ts b/src/cdk/drag-drop/drop-list-container.ts similarity index 90% rename from src/cdk/drag-drop/drop-container.ts rename to src/cdk/drag-drop/drop-list-container.ts index 0891e56c9606..0f0cd23136a5 100644 --- a/src/cdk/drag-drop/drop-container.ts +++ b/src/cdk/drag-drop/drop-list-container.ts @@ -10,7 +10,7 @@ import {InjectionToken, QueryList, ElementRef} from '@angular/core'; import {CdkDrag} from './drag'; -export interface CdkDropContainer { +export interface CdkDropListContainer { /** DOM node that corresponds to the drop container. */ element: ElementRef; @@ -35,7 +35,7 @@ export interface CdkDropContainer { * @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?: CdkDropContainer): void; + drop(item: CdkDrag, currentIndex: number, previousContainer?: CdkDropListContainer): void; /** * Emits an event to indicate that the user moved an item into the container. @@ -58,7 +58,8 @@ export interface CdkDropContainer { getItemIndex(item: CdkDrag): number; _sortItem(item: CdkDrag, pointerX: number, pointerY: number, delta: {x: number, y: number}): void; _draggables: QueryList; - _getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number): CdkDropContainer | null; + _getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number): + CdkDropListContainer | null; _canReturnItem(item: CdkDrag, x: number, y: number): boolean; } @@ -66,4 +67,5 @@ export interface CdkDropContainer { * Injection token that is used to provide a CdkDrop instance to CdkDrag. * Used for avoiding circular imports. */ -export const CDK_DROP_CONTAINER = new InjectionToken('CDK_DROP_CONTAINER'); +export const CDK_DROP_LIST_CONTAINER = + new InjectionToken('CDK_DROP_LIST_CONTAINER'); diff --git a/src/cdk/drag-drop/drop.ts b/src/cdk/drag-drop/drop-list.ts similarity index 93% rename from src/cdk/drag-drop/drop.ts rename to src/cdk/drag-drop/drop-list.ts index d70b9c3b108b..a8645a7a643c 100644 --- a/src/cdk/drag-drop/drop.ts +++ b/src/cdk/drag-drop/drop-list.ts @@ -25,7 +25,7 @@ import {CdkDrag} from './drag'; import {DragDropRegistry} from './drag-drop-registry'; import {CdkDragDrop, CdkDragEnter, CdkDragExit} from './drag-events'; import {moveItemInArray} from './drag-utils'; -import {CDK_DROP_CONTAINER} from './drop-container'; +import {CDK_DROP_LIST_CONTAINER} from './drop-list-container'; /** Counter used to generate unique ids for drop zones. */ @@ -39,18 +39,18 @@ const DROP_PROXIMITY_THRESHOLD = 0.05; /** Container that wraps a set of draggable items. */ @Directive({ - selector: '[cdkDrop], cdk-drop', - exportAs: 'cdkDrop', + selector: '[cdkDropList], cdk-drop-list', + exportAs: 'cdkDropList', providers: [ - {provide: CDK_DROP_CONTAINER, useExisting: CdkDrop}, + {provide: CDK_DROP_LIST_CONTAINER, useExisting: CdkDropList}, ], host: { - 'class': 'cdk-drop', + 'class': 'cdk-drop-list', '[id]': 'id', - '[class.cdk-drop-dragging]': '_dragging' + '[class.cdk-drop-list-dragging]': '_dragging' } }) -export class CdkDrop implements OnInit, OnDestroy { +export class CdkDropList implements OnInit, OnDestroy { /** Draggable items in the container. */ @ContentChildren(forwardRef(() => CdkDrag)) _draggables: QueryList; @@ -59,51 +59,51 @@ export class CdkDrop implements OnInit, OnDestroy { * container's items can be transferred. Can either be references to other drop containers, * or their unique IDs. */ - @Input('cdkDropConnectedTo') connectedTo: (CdkDrop | string)[] | CdkDrop | string = []; + @Input('cdkDropListConnectedTo') + connectedTo: (CdkDropList | string)[] | CdkDropList | string = []; /** Arbitrary data to attach to this container. */ - @Input('cdkDropData') data: T; + @Input('cdkDropListData') data: T; /** Direction in which the list is oriented. */ - @Input('cdkDropOrientation') orientation: 'horizontal' | 'vertical' = 'vertical'; + @Input('cdkDropListOrientation') orientation: 'horizontal' | 'vertical' = 'vertical'; /** * Unique ID for the drop zone. Can be used as a reference - * in the `connectedTo` of another `CdkDrop`. + * in the `connectedTo` of another `CdkDropList`. */ - @Input() id: string = `cdk-drop-${_uniqueIdCounter++}`; + @Input() id: string = `cdk-drop-list-${_uniqueIdCounter++}`; /** Locks the position of the draggable elements inside the container along the specified axis. */ - @Input('cdkDropLockAxis') lockAxis: 'x' | 'y'; + @Input('cdkDropListLockAxis') lockAxis: 'x' | 'y'; /** - * Function that is used to determine whether an item is allowed to be moved - * into a drop container. The function will be called with the item that is - * being dragged and the container that it's being moved into. + * Function that is used to determine whether an item + * is allowed to be moved into a drop container. */ - @Input('cdkDropEnterPredicate') - enterPredicate: (drag: CdkDrag, drop: CdkDrop) => boolean = () => true + @Input('cdkDropListEnterPredicate') + enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean = () => true /** Emits when the user drops an item inside the container. */ - @Output('cdkDropDropped') + @Output('cdkDropListDropped') dropped: EventEmitter> = new EventEmitter>(); /** * Emits when the user has moved a new drag item into this container. */ - @Output('cdkDropEntered') + @Output('cdkDropListEntered') entered: EventEmitter> = new EventEmitter>(); /** * Emits when the user removes an item from the container * by dragging it into another container. */ - @Output('cdkDropExited') + @Output('cdkDropListExited') exited: EventEmitter> = new EventEmitter>(); constructor( public element: ElementRef, - private _dragDropRegistry: DragDropRegistry>, + private _dragDropRegistry: DragDropRegistry>, @Optional() private _dir?: Directionality) {} ngOnInit() { @@ -120,7 +120,7 @@ export class CdkDrop implements OnInit, OnDestroy { /** Cache of the dimensions of all the items and the sibling containers. */ private _positionCache = { items: [] as {drag: CdkDrag, clientRect: ClientRect, offset: number}[], - siblings: [] as {drop: CdkDrop, clientRect: ClientRect}[], + siblings: [] as {drop: CdkDropList, clientRect: ClientRect}[], self: {} as ClientRect }; @@ -150,7 +150,7 @@ export class CdkDrop implements OnInit, OnDestroy { * @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: CdkDrop): void { + drop(item: CdkDrag, currentIndex: number, previousContainer: CdkDropList): void { this._reset(); this.dropped.emit({ item, @@ -312,7 +312,7 @@ export class CdkDrop implements OnInit, OnDestroy { * @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): CdkDrop | null { + _getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number): CdkDropList | null { const result = this._positionCache.siblings .find(sibling => isInsideClientRect(sibling.clientRect, x, y)); diff --git a/src/cdk/drag-drop/public-api.ts b/src/cdk/drag-drop/public-api.ts index d0c8a3035c71..15623f5425a3 100644 --- a/src/cdk/drag-drop/public-api.ts +++ b/src/cdk/drag-drop/public-api.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -export * from './drop'; -export * from './drop-container'; +export * from './drop-list'; +export * from './drop-list-container'; export * from './drag'; export * from './drag-handle'; export * from './drag-events'; diff --git a/src/demo-app/drag-drop/drag-drop-demo.html b/src/demo-app/drag-drop/drag-drop-demo.html index 39ae618d8885..e56d864ad361 100644 --- a/src/demo-app/drag-drop/drag-drop-demo.html +++ b/src/demo-app/drag-drop/drag-drop-demo.html @@ -2,12 +2,12 @@

To do

+ cdkDropList + #one="cdkDropList" + (cdkDropListDropped)="drop($event)" + [cdkDropListLockAxis]="axisLock" + [cdkDropListData]="todo" + [cdkDropListConnectedTo]="[two]">
{{item}} @@ -18,12 +18,12 @@

To do

Done

+ cdkDropList + #two="cdkDropList" + (cdkDropListDropped)="drop($event)" + [cdkDropListLockAxis]="axisLock" + [cdkDropListData]="done" + [cdkDropListConnectedTo]="[one]">
{{item}} @@ -36,11 +36,11 @@

Done

Horizontal list

+ cdkDropList + cdkDropListOrientation="horizontal" + (cdkDropListDropped)="drop($event)" + [cdkDropListLockAxis]="axisLock" + [cdkDropListData]="horizontalData">
{{item}} diff --git a/src/demo-app/drag-drop/drag-drop-demo.scss b/src/demo-app/drag-drop/drag-drop-demo.scss index 557cb0a49b9a..59a38398dac3 100644 --- a/src/demo-app/drag-drop/drag-drop-demo.scss +++ b/src/demo-app/drag-drop/drag-drop-demo.scss @@ -18,7 +18,7 @@ margin-left: 0; } -.cdk-drop { +.cdk-drop-list { border: solid 1px #ccc; min-height: 60px; display: block; @@ -38,7 +38,7 @@ justify-content: space-between; box-sizing: border-box; - .cdk-drop-dragging &:not(.cdk-drag-placeholder) { + .cdk-drop-list-dragging &:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } @@ -54,7 +54,7 @@ } } - .cdk-drop &:last-child { + .cdk-drop-list &:last-child { border: none; } } diff --git a/src/demo-app/drag-drop/drag-drop-demo.ts b/src/demo-app/drag-drop/drag-drop-demo.ts index f682360aa810..cebfe905dd45 100644 --- a/src/demo-app/drag-drop/drag-drop-demo.ts +++ b/src/demo-app/drag-drop/drag-drop-demo.ts @@ -21,10 +21,10 @@ import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag export class DragAndDropDemo { axisLock: 'x' | 'y'; todo = [ - 'Come up with catchy start-up name', - 'Add "blockchain" to name', - 'Sell out', - 'Profit', + 'Go out for Lunch', + 'Make a cool app', + 'Watch TV', + 'Eat a healthy dinner', 'Go to sleep' ]; done = [ diff --git a/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css b/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css index 7d9159be8307..81ffa9305f01 100644 --- a/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css +++ b/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css @@ -49,6 +49,6 @@ border: none; } -.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) { +.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } diff --git a/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html b/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html index c43face3f07a..ed67f2935414 100644 --- a/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html +++ b/src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html @@ -2,12 +2,12 @@

To do

+ (cdkDropListDropped)="drop($event)">
{{item}}
@@ -16,12 +16,12 @@

To do

Done

+ (cdkDropListDropped)="drop($event)">
{{item}}
diff --git a/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css b/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css index 04874275cf31..8e55bdbb9a65 100644 --- a/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css +++ b/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css @@ -43,6 +43,6 @@ border: none; } -.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) { +.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } diff --git a/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html b/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html index b34c04eaf9ae..a6a717fb8746 100644 --- a/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html +++ b/src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html @@ -1,4 +1,4 @@ -
+
{{movie.title}} diff --git a/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css b/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css index 2272ce64d1c5..d093c86edf43 100644 --- a/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css +++ b/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css @@ -46,6 +46,6 @@ border: none; } -.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) { +.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } diff --git a/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html b/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html index 29497e12c46c..c0959ae27757 100644 --- a/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html +++ b/src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html @@ -1,3 +1,3 @@ -
+
{{timePeriod}}
diff --git a/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css b/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css index 04874275cf31..8e55bdbb9a65 100644 --- a/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css +++ b/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css @@ -43,6 +43,6 @@ border: none; } -.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) { +.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } diff --git a/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html b/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html index 7f130b0ae00e..699c95cf9c7b 100644 --- a/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html +++ b/src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html @@ -1,3 +1,3 @@ -
+
{{movie}}