Skip to content

chore(drag-drop): rename cdkDrop to cdkDropList#13619

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrewseguin merged 1 commit into from
Oct 15, 2018
Merged

chore(drag-drop): rename cdkDrop to cdkDropList #13619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/cdk/drag-drop/drag-drop-module.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,22 +7,22 @@
*/

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';
import {CdkDragPlaceholder} from './drag-placeholder';

@NgModule({
declarations: [
CdkDrop,
CdkDropList,
CdkDrag,
CdkDragHandle,
CdkDragPreview,
CdkDragPlaceholder,
],
exports: [
CdkDrop,
CdkDropList,
CdkDrag,
CdkDragHandle,
CdkDragPreview,
Expand Down
12 changes: 6 additions & 6 deletions src/cdk/drag-drop/drag-drop-registry.spec.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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<SimpleDropZone>;
let testComponent: SimpleDropZone;
let registry: DragDropRegistry<CdkDrag, CdkDrop>;
let registry: DragDropRegistry<CdkDrag, CdkDropList>;

beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
Expand All@@ -26,7 +26,7 @@ describe('DragDropRegistry', () => {
testComponent = fixture.componentInstance;
fixture.detectChanges();

inject([DragDropRegistry], (c: DragDropRegistry<CdkDrag, CdkDrop>) => {
inject([DragDropRegistry], (c: DragDropRegistry<CdkDrag, CdkDropList>) => {
registry = c;
})();
}));
Expand DownExpand Up@@ -159,16 +159,16 @@ describe('DragDropRegistry', () => {

@Component({
template: `
<div cdkDrop id="items" [cdkDropData]="items">
<div cdkDropList id="items" [cdkDropListData]="items">
<div *ngFor="let item of items" cdkDrag>{{item}}</div>
</div>

<div cdkDrop id="items" *ngIf="showDuplicateContainer"></div>
<div cdkDropList id="items" *ngIf="showDuplicateContainer"></div>
`
})
class SimpleDropZone {
@ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
@ViewChildren(CdkDrop) dropInstances: QueryList<CdkDrop>;
@ViewChildren(CdkDropList) dropInstances: QueryList<CdkDropList>;
items = ['Zero', 'One', 'Two', 'Three'];
showDuplicateContainer = false;
}
42 changes: 21 additions & 21 deletions src/cdk/drag-drop/drag-drop.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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.

<!-- example(cdk-drag-drop-overview) -->

### 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.

<!-- example(cdk-drag-drop-sorting) -->

### 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.

<!-- example(cdk-drag-drop-connected-sorting) -->

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
<!-- This is valid -->
<div cdkDrop #listOne="cdkDrop" [cdkDropConnectedTo]="[listTwo]"></div>
<div cdkDrop #listTwo="cdkDrop" [cdkDropConnectedTo]="[listOne]"></div>
<div cdkDropList #listOne="cdkDropList" [cdkDropListConnectedTo]="[listTwo]"></div>
<div cdkDropList #listTwo="cdkDropList" [cdkDropListConnectedTo]="[listOne]"></div>

<!-- This is valid as well -->
<div cdkDrop id="list-one" [cdkDropConnectedTo]="['list-two']"></div>
<div cdkDrop id="list-two" [cdkDropConnectedTo]="['list-one']"></div>
<div cdkDropList id="list-one" [cdkDropListConnectedTo]="['list-two']"></div>
<div cdkDropList id="list-two" [cdkDropListConnectedTo]="['list-one']"></div>
```

### 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
<div cdkDrop [cdkDropData]="list" *ngFor="let list of lists" (cdkDropDropped)="drop($event)">
<div cdkDropList [cdkDropListData]="list" *ngFor="let list of lists" (cdkDropListDropped)="drop($event)">
<div cdkDrag [cdkDragData]="item" *ngFor="let item of list"></div>
</div>
```

### 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
Expand All@@ -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:

Expand DownExpand Up@@ -105,14 +105,14 @@ This preview can be customized, though, by providing a custom template via `*cdk
<!-- example(cdk-drag-drop-custom-preview) -->

### 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".

<!-- example(cdk-drag-drop-horizontal-sorting) -->

### 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"`.

<!-- example(cdk-drag-drop-axis-lock) -->
Expand Down
10 changes: 5 additions & 5 deletions src/cdk/drag-drop/drag-events.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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<T = any> {
Expand All@@ -24,7 +24,7 @@ export interface CdkDragEnd<T = any> {
/** Event emitted when the user moves an item into a new drop container. */
export interface CdkDragEnter<T = any, I = T> {
/** Container into which the user has moved the item. */
container: CdkDropContainer<T>;
container: CdkDropListContainer<T>;
/** Item that was removed from the container. */
item: CdkDrag<I>;
}
Expand All@@ -35,7 +35,7 @@ export interface CdkDragEnter<T = any, I = T> {
*/
export interface CdkDragExit<T = any, I = T> {
/** Container from which the user has a removed an item. */
container: CdkDropContainer<T>;
container: CdkDropListContainer<T>;
/** Item that was removed from the container. */
item: CdkDrag<I>;
}
Expand All@@ -50,9 +50,9 @@ export interface CdkDragDrop<T, O = T> {
/** Item that is being dropped. */
item: CdkDrag;
/** Container in which the item was dropped. */
container: CdkDropContainer<T>;
container: CdkDropListContainer<T>;
/** Container from which the item was picked up. Can be the same as the `container`. */
previousContainer: CdkDropContainer<O>;
previousContainer: CdkDropListContainer<O>;
}

/** Event emitted as the user is dragging a draggable item. */
Expand Down
Loading