From 334d9e26ca3945a7b83758e3f06ee7c97db61ec2 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Thu, 18 Oct 2018 22:04:35 +0200 Subject: [PATCH] refactor(drag-drop): expose method for resetting the drag position Exposes an API that allows people to reset the position of a `cdkDrag`. Fixes #13661. --- src/cdk/drag-drop/drag.spec.ts | 26 ++++++++++++++++++++++++++ src/cdk/drag-drop/drag.ts | 7 +++++++ 2 files changed, 33 insertions(+) diff --git a/src/cdk/drag-drop/drag.spec.ts b/src/cdk/drag-drop/drag.spec.ts index d131461ed73e..4e2b41187418 100644 --- a/src/cdk/drag-drop/drag.spec.ts +++ b/src/cdk/drag-drop/drag.spec.ts @@ -442,6 +442,32 @@ describe('CdkDrag', () => { expect(dragElement.style.touchAction) .not.toEqual('none', 'should not disable touchAction on when there is a drag handle'); }); + it('should be able to reset a freely-dragged item to its initial position', fakeAsync(() => { + const fixture = createComponent(StandaloneDraggable); + fixture.detectChanges(); + const dragElement = fixture.componentInstance.dragElement.nativeElement; + + expect(dragElement.style.transform).toBeFalsy(); + dragElementViaMouse(fixture, dragElement, 50, 100); + expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); + + fixture.componentInstance.dragInstance.reset(); + expect(dragElement.style.transform).toBeFalsy(); + })); + + it('should start dragging an item from its initial position after a reset', fakeAsync(() => { + const fixture = createComponent(StandaloneDraggable); + fixture.detectChanges(); + const dragElement = fixture.componentInstance.dragElement.nativeElement; + + expect(dragElement.style.transform).toBeFalsy(); + dragElementViaMouse(fixture, dragElement, 50, 100); + expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); + fixture.componentInstance.dragInstance.reset(); + + dragElementViaMouse(fixture, dragElement, 25, 50); + expect(dragElement.style.transform).toBe('translate3d(25px, 50px, 0px)'); + })); }); diff --git a/src/cdk/drag-drop/drag.ts b/src/cdk/drag-drop/drag.ts index 35c9a5f29eac..b079a0bff7cb 100644 --- a/src/cdk/drag-drop/drag.ts +++ b/src/cdk/drag-drop/drag.ts @@ -263,6 +263,13 @@ export class CdkDrag implements AfterViewInit, OnDestroy { return this._rootElement; } + /** Resets a standalone drag item to its initial position. */ + reset(): void { + this._rootElement.style.transform = ''; + this._activeTransform = {x: 0, y: 0}; + this._passiveTransform = {x: 0, y: 0}; + } + ngAfterViewInit() { // We need to wait for the zone to stabilize, in order for the reference // element to be in the proper place in the DOM. This is mostly relevant