mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
refactor(drag-drop): expose method for resetting the drag position (#13673)
Exposes an API that allows people to reset the position of a `cdkDrag`. Fixes #13661.
This commit is contained in:
committed by
vivian-hu
parent
95a1abe1ac
commit
ba31c7207a
@@ -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)');
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
|
||||
@@ -263,6 +263,13 @@ export class CdkDrag<T = any> 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
|
||||
|
||||
Reference in New Issue
Block a user