From 13ed2a3750f0c66b9c1ab56c01e0a6b2a348c449 Mon Sep 17 00:00:00 2001 From: TKul6 Date: Tue, 30 Oct 2018 11:58:47 +0200 Subject: [PATCH 1/9] fix drag-drop: return to initial container if needed Dragging an item over a drop zone and dropping it outside the zone cancels the drag. --- src/cdk/drag-drop/drag.ts | 3 ++- src/cdk/drag-drop/drop-list-container.ts | 1 + src/cdk/drag-drop/drop-list.ts | 10 ++++++++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/cdk/drag-drop/drag.ts b/src/cdk/drag-drop/drag.ts index f26e2e004b5c..9282a62abf12 100644 --- a/src/cdk/drag-drop/drag.ts +++ b/src/cdk/drag-drop/drag.ts @@ -510,7 +510,8 @@ export class CdkDrag implements AfterViewInit, OnDestroy { // This handles the case where two containers are connected one way and the user tries to // undo dragging an item into a new container. if (!newContainer && this.dropContainer !== this._initialContainer && - this._initialContainer._canReturnItem(this, x, y)) { + (this._initialContainer._canReturnItem(this, x, y) || + !this.dropContainer._isOverContainer(x, y))) { newContainer = this._initialContainer; } diff --git a/src/cdk/drag-drop/drop-list-container.ts b/src/cdk/drag-drop/drop-list-container.ts index b270ac64711b..ea18a268fe61 100644 --- a/src/cdk/drag-drop/drop-list-container.ts +++ b/src/cdk/drag-drop/drop-list-container.ts @@ -61,6 +61,7 @@ export interface CdkDropListContainer { _getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number): CdkDropListContainer | null; _canReturnItem(item: CdkDrag, x: number, y: number): boolean; + _isOverContainer(x: number, y: number): boolean; } /** diff --git a/src/cdk/drag-drop/drop-list.ts b/src/cdk/drag-drop/drop-list.ts index a8645a7a643c..0e838cc04edc 100644 --- a/src/cdk/drag-drop/drop-list.ts +++ b/src/cdk/drag-drop/drop-list.ts @@ -330,6 +330,16 @@ export class CdkDropList implements OnInit, OnDestroy { return isInsideClientRect(this._positionCache.self, x, y) && this.enterPredicate(item, this); } + /** + * Checks whether an item that is currently over the container, + * @param item Item that is being checked. + * @param x Position of the item along the X axis. + * @param y Position of the item along the Y axis. + */ + _isOverContainer(x: number, y: number): boolean { + return isInsideClientRect(this._positionCache.self, x, y); + } + /** Refreshes the position cache of the items and sibling containers. */ private _cachePositions() { const isHorizontal = this.orientation === 'horizontal'; From 99e79fa6da68cd5f1df72934938a20fe9f8a0413 Mon Sep 17 00:00:00 2001 From: TKul6 Date: Tue, 30 Oct 2018 17:18:57 +0200 Subject: [PATCH 2/9] test (drag/drop): test canceling drag after hovering over a drop zone. Test a use case when the client drags an element over a drop zone and drop it outside the zone. --- src/cdk/drag-drop/drag.spec.ts | 41 +++++++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/src/cdk/drag-drop/drag.spec.ts b/src/cdk/drag-drop/drag.spec.ts index 76eed1e128e6..3a315df98c2b 100644 --- a/src/cdk/drag-drop/drag.spec.ts +++ b/src/cdk/drag-drop/drag.spec.ts @@ -1394,7 +1394,7 @@ describe('CdkDrag', () => { expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); })); - + it('should transfer the DOM element from one drop zone to another', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); fixture.detectChanges(); @@ -1712,6 +1712,45 @@ describe('CdkDrag', () => { expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); })); + it('should be able to move the element over a new container and return it when the dropping' + + ' item is outside the drop container', fakeAsync(() => { + const fixture = createComponent(ConnectedDropZones); + fixture.detectChanges(); + + const groups = fixture.componentInstance.groupedDragItems; + const dropZones = fixture.componentInstance.dropInstances.map(d => d.element.nativeElement); + const item = groups[0][1]; + const initialRect = item.element.nativeElement.getBoundingClientRect(); + const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); + + startDraggingViaMouse(fixture, item.element.nativeElement); + + const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; + + expect(placeholder).toBeTruthy(); + expect(dropZones[0].contains(placeholder)) + .toBe(true, 'Expected placeholder to be inside the first container.'); + + dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); + + fixture.detectChanges(); + + expect(dropZones[1].contains(placeholder)) + .toBe(true, 'Expected placeholder to be inside second container.'); + + dispatchMouseEvent(document, 'mousemove', targetRect.left + -5, targetRect.top - 5); + fixture.detectChanges(); + + expect(dropZones[0].contains(placeholder)) + .toBe(true, 'Expected placeholder to be back inside first container.'); + + dispatchMouseEvent(document, 'mouseup'); + fixture.detectChanges(); + + expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); + })); + + }); }); From a0746f0e5bd1f69bea2f19473bb877af3a9add9e Mon Sep 17 00:00:00 2001 From: TKul6 Date: Wed, 7 Nov 2018 09:26:05 +0200 Subject: [PATCH 3/9] feat (drag/drop) support custom behavior on drop Adding to CDK_DRAG_CONFIG additional parameter to support cancel dropping in invalid drop zone. --- src/cdk/drag-drop/drag.spec.ts | 34 +++++++++++++++++------- src/cdk/drag-drop/drag.ts | 21 +++++++++++++-- src/demo-app/drag-drop/drag-drop-demo.ts | 12 +++++++-- 3 files changed, 53 insertions(+), 14 deletions(-) diff --git a/src/cdk/drag-drop/drag.spec.ts b/src/cdk/drag-drop/drag.spec.ts index 3a315df98c2b..b37a9aff6294 100644 --- a/src/cdk/drag-drop/drag.spec.ts +++ b/src/cdk/drag-drop/drag.spec.ts @@ -9,6 +9,7 @@ import { ViewChild, ViewChildren, ViewEncapsulation, + ValueProvider, } from '@angular/core'; import {TestBed, ComponentFixture, fakeAsync, flush, tick} from '@angular/core/testing'; import {DragDropModule} from './drag-drop-module'; @@ -19,7 +20,7 @@ import { dispatchTouchEvent, } from '@angular/cdk/testing'; import {Directionality} from '@angular/cdk/bidi'; -import {CdkDrag, CDK_DRAG_CONFIG, CdkDragConfig} from './drag'; +import {CdkDrag, CDK_DRAG_CONFIG, CdkDragConfig, CdkDropStrategy} from './drag'; import {CdkDragDrop} from './drag-events'; import {moveItemInArray} from './drag-utils'; import {CdkDropList} from './drop-list'; @@ -31,11 +32,10 @@ const ITEM_WIDTH = 75; describe('CdkDrag', () => { function createComponent(componentType: Type, providers: Provider[] = [], dragDistance = 0): ComponentFixture { - TestBed.configureTestingModule({ - imports: [DragDropModule], - declarations: [componentType, PassthroughComponent], - providers: [ - { + // If none of the providers is CDK_DRAG_CONFIG, add the default testing config + if(providers.every((provider: any) => + provider.provide && provider.provide !== CDK_DRAG_CONFIG)) { + providers.push({ provide: CDK_DRAG_CONFIG, useValue: { // We default the `dragDistance` to zero, because the majority of the tests @@ -44,9 +44,14 @@ describe('CdkDrag', () => { dragStartThreshold: dragDistance, pointerDirectionChangeThreshold: 5 } as CdkDragConfig - }, - ...providers - ], + }); + } + + TestBed.configureTestingModule({ + imports: [DragDropModule], + declarations: [componentType, PassthroughComponent], + providers: providers + , }).compileComponents(); return TestBed.createComponent(componentType); @@ -1714,7 +1719,16 @@ describe('CdkDrag', () => { it('should be able to move the element over a new container and return it when the dropping' + ' item is outside the drop container', fakeAsync(() => { - const fixture = createComponent(ConnectedDropZones); + + const fixture = createComponent(ConnectedDropZones, + [{ + provide: CDK_DRAG_CONFIG, + useValue: { + dragStartThreshold: 0, + pointerDirectionChangeThreshold: 5, + dropStrategy: CdkDropStrategy.ExactLocation + } as CdkDragConfig + } as ValueProvider]); fixture.detectChanges(); const groups = fixture.componentInstance.groupedDragItems; diff --git a/src/cdk/drag-drop/drag.ts b/src/cdk/drag-drop/drag.ts index 9282a62abf12..b83f12e278ce 100644 --- a/src/cdk/drag-drop/drag.ts +++ b/src/cdk/drag-drop/drag.ts @@ -66,6 +66,22 @@ export interface CdkDragConfig { * considers them to have changed the drag direction. */ pointerDirectionChangeThreshold: number; + + /** + * The strategy to take when dropping the item (in non drop zone area) + */ + dropStrategy: CdkDropStrategy +} + +/** Enum to decide what to do when the user drop the item + * LastKnownContainer - Drop the item on the Last container the item was dragged hover, no matter where the item is dropped. + * ExactLocation - Tries to drop the item in the current location, if the current location + * is not inside a valid drop zonem the item will return to the initial container. + */ +export enum CdkDropStrategy { + LastKnownContainer, + ExactLocation + } /** Injection token that can be used to configure the behavior of `CdkDrag`. */ @@ -76,7 +92,7 @@ export const CDK_DRAG_CONFIG = new InjectionToken('CDK_DRAG_CONFI /** @docs-private */ export function CDK_DRAG_CONFIG_FACTORY(): CdkDragConfig { - return {dragStartThreshold: 5, pointerDirectionChangeThreshold: 5}; + return {dragStartThreshold: 5, pointerDirectionChangeThreshold: 5, dropStrategy: CdkDropStrategy.LastKnownContainer}; } /** Options that can be used to bind a passive event listener. */ @@ -511,7 +527,8 @@ export class CdkDrag implements AfterViewInit, OnDestroy { // undo dragging an item into a new container. if (!newContainer && this.dropContainer !== this._initialContainer && (this._initialContainer._canReturnItem(this, x, y) || - !this.dropContainer._isOverContainer(x, y))) { + (this._config.dropStrategy === CdkDropStrategy.ExactLocation && + !this.dropContainer._isOverContainer(x, y)))) { newContainer = this._initialContainer; } diff --git a/src/demo-app/drag-drop/drag-drop-demo.ts b/src/demo-app/drag-drop/drag-drop-demo.ts index 1e32b2380ee3..46f8554da03e 100644 --- a/src/demo-app/drag-drop/drag-drop-demo.ts +++ b/src/demo-app/drag-drop/drag-drop-demo.ts @@ -13,15 +13,23 @@ import { CdkDragDrop, moveItemInArray, transferArrayItem, - copyArrayItem + copyArrayItem, + CdkDragConfig, + CdkDropStrategy, + CDK_DRAG_CONFIG } from '@angular/cdk/drag-drop'; - + @Component({ moduleId: module.id, selector: 'drag-drop-demo', templateUrl: 'drag-drop-demo.html', styleUrls: ['drag-drop-demo.css'], encapsulation: ViewEncapsulation.None, + providers: [{ + provide: CDK_DRAG_CONFIG, + useValue: { dragStartThreshold: 5,pointerDirectionChangeThreshold: 5, dropStrategy: CdkDropStrategy.LastKnownContainer + } as CdkDragConfig + }] }) export class DragAndDropDemo { From f30da88837be367dedab307001dac6f8fd0b2396 Mon Sep 17 00:00:00 2001 From: TKul6 Date: Sat, 24 Nov 2018 13:34:35 +0200 Subject: [PATCH 4/9] chore (drag/drop): linting --- src/cdk/drag-drop/drag.spec.ts | 5 ++--- src/cdk/drag-drop/drag.ts | 16 ++++++++++------ src/cdk/drag-drop/drop-list.ts | 2 +- src/dev-app/drag-drop/drag-drop-demo.ts | 7 ++++--- 4 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/cdk/drag-drop/drag.spec.ts b/src/cdk/drag-drop/drag.spec.ts index 7774a097dd41..aa7fdca978ff 100644 --- a/src/cdk/drag-drop/drag.spec.ts +++ b/src/cdk/drag-drop/drag.spec.ts @@ -35,7 +35,7 @@ describe('CdkDrag', () => { function createComponent(componentType: Type, providers: Provider[] = [], dragDistance = 0): ComponentFixture { // If none of the providers is CDK_DRAG_CONFIG, add the default testing config - if(providers.every((provider: any) => + if (providers.every((provider: any) => provider.provide && provider.provide !== CDK_DRAG_CONFIG)) { providers.push({ provide: CDK_DRAG_CONFIG, @@ -1830,7 +1830,7 @@ describe('CdkDrag', () => { expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); })); - + it('should transfer the DOM element from one drop zone to another', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); fixture.detectChanges(); @@ -2190,7 +2190,6 @@ describe('CdkDrag', () => { const groups = fixture.componentInstance.groupedDragItems; const dropZones = fixture.componentInstance.dropInstances.map(d => d.element.nativeElement); const item = groups[0][1]; - const initialRect = item.element.nativeElement.getBoundingClientRect(); const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); startDraggingViaMouse(fixture, item.element.nativeElement); diff --git a/src/cdk/drag-drop/drag.ts b/src/cdk/drag-drop/drag.ts index df25c4ae307e..a6791ee13e99 100644 --- a/src/cdk/drag-drop/drag.ts +++ b/src/cdk/drag-drop/drag.ts @@ -71,14 +71,18 @@ export interface CdkDragConfig { /** * The strategy to take when dropping the item (in non drop zone area) */ - dropStrategy: CdkDropStrategy + dropStrategy: CdkDropStrategy; } -/** Enum to decide what to do when the user drop the item - * LastKnownContainer - Drop the item on the Last container the item was dragged hover, no matter where the item is dropped. - * ExactLocation - Tries to drop the item in the current location, if the current location - * is not inside a valid drop zonem the item will return to the initial container. - */ + /** + * Enum to decide what to do when the user drop the item + * LastKnownContainer - Drop the item on the Last container the item was dragged hover, + * no matter where the item is dropped. + * ExactLocation - Tries to drop the item in the current location, + * if the current location + * is not inside a valid drop zoom + * the item will return to the initial container. + */ export enum CdkDropStrategy { LastKnownContainer, ExactLocation diff --git a/src/cdk/drag-drop/drop-list.ts b/src/cdk/drag-drop/drop-list.ts index 3aeb7464df18..8acded0cfb90 100644 --- a/src/cdk/drag-drop/drop-list.ts +++ b/src/cdk/drag-drop/drop-list.ts @@ -392,7 +392,7 @@ export class CdkDropList implements OnInit, OnDestroy { return isInsideClientRect(this._positionCache.self, x, y); } - /** + /** * Checks whether an item that is currently over the container, * @param item Item that is being checked. * @param x Position of the item along the X axis. diff --git a/src/dev-app/drag-drop/drag-drop-demo.ts b/src/dev-app/drag-drop/drag-drop-demo.ts index 46f8554da03e..ea25797784fe 100644 --- a/src/dev-app/drag-drop/drag-drop-demo.ts +++ b/src/dev-app/drag-drop/drag-drop-demo.ts @@ -13,12 +13,12 @@ import { CdkDragDrop, moveItemInArray, transferArrayItem, - copyArrayItem, + copyArrayItem, CdkDragConfig, CdkDropStrategy, CDK_DRAG_CONFIG } from '@angular/cdk/drag-drop'; - + @Component({ moduleId: module.id, selector: 'drag-drop-demo', @@ -27,7 +27,8 @@ import { encapsulation: ViewEncapsulation.None, providers: [{ provide: CDK_DRAG_CONFIG, - useValue: { dragStartThreshold: 5,pointerDirectionChangeThreshold: 5, dropStrategy: CdkDropStrategy.LastKnownContainer + useValue: { dragStartThreshold: 5, pointerDirectionChangeThreshold: 5, + dropStrategy: CdkDropStrategy.LastKnownContainer } as CdkDragConfig }] }) From e74ee9121adc235d22eed53736e5e6a2762daa9a Mon Sep 17 00:00:00 2001 From: TKul6 Date: Sat, 24 Nov 2018 14:41:22 +0200 Subject: [PATCH 5/9] chore (drag/drop): linting --- src/cdk/drag-drop/drag.ts | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/cdk/drag-drop/drag.ts b/src/cdk/drag-drop/drag.ts index a6791ee13e99..5b8ad4ebb651 100644 --- a/src/cdk/drag-drop/drag.ts +++ b/src/cdk/drag-drop/drag.ts @@ -74,15 +74,15 @@ export interface CdkDragConfig { dropStrategy: CdkDropStrategy; } - /** - * Enum to decide what to do when the user drop the item - * LastKnownContainer - Drop the item on the Last container the item was dragged hover, - * no matter where the item is dropped. - * ExactLocation - Tries to drop the item in the current location, - * if the current location - * is not inside a valid drop zoom - * the item will return to the initial container. - */ + /** + * Enum to decide what to do when the user drop the item + * LastKnownContainer - Drop the item on the Last container the item was dragged hover, + * no matter where the item is dropped. + * ExactLocation - Tries to drop the item in the current location, + * if the current location + * is not inside a valid drop zoom + * the item will return to the initial container. + */ export enum CdkDropStrategy { LastKnownContainer, ExactLocation @@ -97,7 +97,8 @@ export const CDK_DRAG_CONFIG = new InjectionToken('CDK_DRAG_CONFI /** @docs-private */ export function CDK_DRAG_CONFIG_FACTORY(): CdkDragConfig { - return {dragStartThreshold: 5, pointerDirectionChangeThreshold: 5, dropStrategy: CdkDropStrategy.LastKnownContainer}; + return {dragStartThreshold: 5, pointerDirectionChangeThreshold: 5, + dropStrategy: CdkDropStrategy.LastKnownContainer}; } /** Options that can be used to bind a passive event listener. */ From 23e2931f5e91f2dabc5625b03926482ebd1c05ab Mon Sep 17 00:00:00 2001 From: TKul6 Date: Fri, 30 Nov 2018 17:42:17 +0200 Subject: [PATCH 6/9] chore: (drag/drop): adding missing configuration to Bazel --- tools/public_api_guard/cdk/drag-drop.d.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/tools/public_api_guard/cdk/drag-drop.d.ts b/tools/public_api_guard/cdk/drag-drop.d.ts index 6fb9b60ecbde..214f9fe3a380 100644 --- a/tools/public_api_guard/cdk/drag-drop.d.ts +++ b/tools/public_api_guard/cdk/drag-drop.d.ts @@ -36,6 +36,12 @@ export declare class CdkDrag implements AfterViewInit, OnDestroy { export interface CdkDragConfig { dragStartThreshold: number; pointerDirectionChangeThreshold: number; + dropStrategy: CdkDropStrategy; +} + +export enum CdkDropStrategy { + LastKnownContainer, + ExactLocation } export interface CdkDragDrop { From cc3dfacee7fe8b10de21149a1e399c6dc76ee4a6 Mon Sep 17 00:00:00 2001 From: TKul6 Date: Sun, 9 Dec 2018 23:10:29 +0200 Subject: [PATCH 7/9] chore (drag/drop): fixing merge issues --- src/cdk/drag-drop/directives/drag.ts | 4 ++-- src/cdk/drag-drop/drop-list-container.ts | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/cdk/drag-drop/directives/drag.ts b/src/cdk/drag-drop/directives/drag.ts index 1db945ca0656..bb1fb18fe71a 100644 --- a/src/cdk/drag-drop/directives/drag.ts +++ b/src/cdk/drag-drop/directives/drag.ts @@ -44,7 +44,7 @@ import {CdkDragPlaceholder} from './drag-placeholder'; import {CdkDragPreview} from './drag-preview'; import {CDK_DROP_LIST} from '../drop-list-container'; import {CDK_DRAG_PARENT} from '../drag-parent'; -import {DragRef, DragRefConfig} from '../drag-ref'; +import {DragRef, DragRefConfig, CdkDropStrategy} from '../drag-ref'; import {DropListRef} from '../drop-list-ref'; import {CdkDropListInternal as CdkDropList} from './drop-list'; @@ -56,7 +56,7 @@ export const CDK_DRAG_CONFIG = new InjectionToken('CDK_DRAG_CONFI /** @docs-private */ export function CDK_DRAG_CONFIG_FACTORY(): DragRefConfig { - return {dragStartThreshold: 5, pointerDirectionChangeThreshold: 5}; + return {dragStartThreshold: 5, pointerDirectionChangeThreshold: 5, dropStrategy: CdkDropStrategy.LastKnownContainer}; } /** Element that can be moved inside a CdkDropList container. */ diff --git a/src/cdk/drag-drop/drop-list-container.ts b/src/cdk/drag-drop/drop-list-container.ts index caa3a09b310b..f9b8f2a44412 100644 --- a/src/cdk/drag-drop/drop-list-container.ts +++ b/src/cdk/drag-drop/drop-list-container.ts @@ -74,7 +74,6 @@ export interface CdkDropListContainer { _getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number): CdkDropListContainer | null; _isOverContainer(x: number, y: number): boolean; - _canReturnItem(x: number, y: number): boolean; } /** From 72f1d2c12057933f52c1a768b5fb9f45ed7e568e Mon Sep 17 00:00:00 2001 From: TKul6 Date: Sun, 9 Dec 2018 23:37:40 +0200 Subject: [PATCH 8/9] chore(drag/drop): linting --- src/cdk/drag-drop/directives/drag.spec.ts | 1 - src/cdk/drag-drop/directives/drag.ts | 3 ++- src/cdk/drag-drop/drag-ref.ts | 3 ++- src/dev-app/drag-drop/drag-drop-demo.ts | 4 ++-- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts index 66680d35f686..862cf7f8bcdf 100644 --- a/src/cdk/drag-drop/directives/drag.spec.ts +++ b/src/cdk/drag-drop/directives/drag.spec.ts @@ -30,7 +30,6 @@ import {CdkDragHandle} from './drag-handle'; import {CdkDropListGroup} from './drop-list-group'; import {extendStyles} from '../drag-styling'; import {DragRefConfig, CdkDropStrategy} from '../drag-ref'; -import { CdkDragConfig } from '../public-api'; const ITEM_HEIGHT = 25; const ITEM_WIDTH = 75; diff --git a/src/cdk/drag-drop/directives/drag.ts b/src/cdk/drag-drop/directives/drag.ts index bb1fb18fe71a..315bf8536eab 100644 --- a/src/cdk/drag-drop/directives/drag.ts +++ b/src/cdk/drag-drop/directives/drag.ts @@ -56,7 +56,8 @@ export const CDK_DRAG_CONFIG = new InjectionToken('CDK_DRAG_CONFI /** @docs-private */ export function CDK_DRAG_CONFIG_FACTORY(): DragRefConfig { - return {dragStartThreshold: 5, pointerDirectionChangeThreshold: 5, dropStrategy: CdkDropStrategy.LastKnownContainer}; + return {dragStartThreshold: 5, pointerDirectionChangeThreshold: 5, + dropStrategy: CdkDropStrategy.LastKnownContainer}; } /** Element that can be moved inside a CdkDropList container. */ diff --git a/src/cdk/drag-drop/drag-ref.ts b/src/cdk/drag-drop/drag-ref.ts index 9222fedec5b2..4c6efaf7a246 100644 --- a/src/cdk/drag-drop/drag-ref.ts +++ b/src/cdk/drag-drop/drag-ref.ts @@ -685,7 +685,8 @@ export class DragRef { // item into a new container. if (!newContainer && this.dropContainer !== this._initialContainer && (this._initialContainer._isOverContainer(x, y) || - !this.dropContainer!._isOverContainer(x, y))) { + (!this.dropContainer!._isOverContainer(x, y) && + this._config.dropStrategy === CdkDropStrategy.ExactLocation))) { newContainer = this._initialContainer; } diff --git a/src/dev-app/drag-drop/drag-drop-demo.ts b/src/dev-app/drag-drop/drag-drop-demo.ts index be964ff3fa18..0ef62ae69b97 100644 --- a/src/dev-app/drag-drop/drag-drop-demo.ts +++ b/src/dev-app/drag-drop/drag-drop-demo.ts @@ -9,7 +9,8 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {MatIconRegistry} from '@angular/material/icon'; import {DomSanitizer} from '@angular/platform-browser'; -import { CDK_DRAG_CONFIG, CdkDragDrop, moveItemInArray, transferArrayItem, CdkDragConfig } from '@angular/cdk/drag-drop'; +import {CDK_DRAG_CONFIG, CdkDragDrop, moveItemInArray, + transferArrayItem, CdkDragConfig} from '@angular/cdk/drag-drop'; @Component({ moduleId: module.id, @@ -20,7 +21,6 @@ import { CDK_DRAG_CONFIG, CdkDragDrop, moveItemInArray, transferArrayItem, CdkDr providers: [{ provide: CDK_DRAG_CONFIG, useValue: { dragStartThreshold: 5, pointerDirectionChangeThreshold: 5, - dropStrategy: 1 } as CdkDragConfig }] }) From ba5dad2e5a2cbf68c1defd71e144651e73ebd5a1 Mon Sep 17 00:00:00 2001 From: TKul6 Date: Tue, 11 Dec 2018 10:20:38 +0200 Subject: [PATCH 9/9] chore(drag/drop): Removing data from DragRefConfig (in api guard). --- tools/public_api_guard/cdk/drag-drop.d.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/tools/public_api_guard/cdk/drag-drop.d.ts b/tools/public_api_guard/cdk/drag-drop.d.ts index 5db19901a210..b227f4df3e28 100644 --- a/tools/public_api_guard/cdk/drag-drop.d.ts +++ b/tools/public_api_guard/cdk/drag-drop.d.ts @@ -34,15 +34,7 @@ export declare class CdkDrag implements AfterViewInit, OnDestroy { reset(): void; } -export interface CdkDragConfig { - dragStartThreshold: number; - pointerDirectionChangeThreshold: number; - dropStrategy: CdkDropStrategy; -} - -export enum CdkDropStrategy { - LastKnownContainer, - ExactLocation +export interface CdkDragConfig extends DragRefConfig { } export interface CdkDragDrop {