Skip to content

Commit 3656a4e

Browse files
crisbetovivian-hu-zz
authored andcommittedJan 16, 2019
fix(drag-drop): incorrectly preserving transform if root element changes (#14697)
Currently we cache the element's initial transform so that we can preserve it after the user has dragged it, however if the root element changes, the cached value will be incorrect. These changes reset the transforms if the root element changes.
1 parent 005fb46 commit 3656a4e

File tree

2 files changed

+21
-0
lines changed

2 files changed

+21
-0
lines changed
 

‎src/cdk/drag-drop/directives/drag.spec.ts

+20
Original file line numberDiff line numberDiff line change
@@ -490,6 +490,26 @@ describe('CdkDrag', () => {
490490
expect(dragElement.style.transform).toBeFalsy();
491491
}));
492492

493+
it('should preserve the initial transform if the root element changes', fakeAsync(() => {
494+
const fixture = createComponent(DraggableWithAlternateRoot);
495+
fixture.detectChanges();
496+
const dragElement = fixture.componentInstance.dragElement.nativeElement;
497+
const alternateRoot = fixture.componentInstance.dragRoot.nativeElement;
498+
499+
dragElement.style.transform = 'translateX(-50%)';
500+
dragElementViaMouse(fixture, dragElement, 50, 100);
501+
expect(dragElement.style.transform).toContain('translateX(-50%)');
502+
503+
alternateRoot.style.transform = 'scale(2)';
504+
fixture.componentInstance.rootElementSelector = '.alternate-root';
505+
fixture.detectChanges();
506+
507+
dragElementViaMouse(fixture, alternateRoot, 50, 100);
508+
509+
expect(alternateRoot.style.transform).not.toContain('translateX(-50%)');
510+
expect(alternateRoot.style.transform).toContain('scale(2)');
511+
}));
512+
493513
it('should handle the root element selector changing after init', fakeAsync(() => {
494514
const fixture = createComponent(DraggableWithAlternateRoot);
495515
fixture.detectChanges();

‎src/cdk/drag-drop/drag-ref.ts

+1
Original file line numberDiff line numberDiff line change
@@ -323,6 +323,7 @@ export class DragRef<T = any> {
323323

324324
element.addEventListener('mousedown', this._pointerDown, activeEventListenerOptions);
325325
element.addEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);
326+
this._initialTransform = undefined;
326327
this._rootElement = element;
327328
}
328329

0 commit comments

Comments
 (0)
Please sign in to comment.