fix(cdk/drag-drop): element not draggable when has initial transform none

Author: laiseng

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

@@ -407,6 +407,51 @@ describe('CdkDrag', () => {
       }));
     });
 
+    describe('mouse dragging when initial transform is none', () => {
+      it('should drag an element freely to a particular position', fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggableWithInitialTransformNone);
+        fixture.detectChanges();
+        const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+        expect(dragElement.style.transform).toBe('none');
+        dragElementViaMouse(fixture, dragElement, 50, 100);
+        expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+      }));
+
+      it('should drag an SVG element freely to a particular position', fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggableSvgWithInitialTransformNone);
+        fixture.detectChanges();
+        const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+        expect(dragElement.style.transform).toBe('none');
+        dragElementViaMouse(fixture, dragElement, 50, 100);
+        expect(dragElement.getAttribute('transform')).toBe('translate(50 100)');
+      }));
+
+      it('should drag an SVG element freely to a particular position in SVG viewBox coordinates',
+        fakeAsync(() => {
+          const fixture = createComponent(StandaloneDraggableSvgWithViewBoxInitialTranformNone);
+          fixture.detectChanges();
+          const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+          expect(dragElement.style.transform).toBe('none');
+          dragElementViaMouse(fixture, dragElement, 50, 100);
+          expect(dragElement.getAttribute('transform')).toBe('translate(100 200)');
+        }));
+    });
+
+    describe('touch dragging when initial transform is none', () => {
+      it('should drag an element freely to a particular position', fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggableWithInitialTransformNone);
+        fixture.detectChanges();
+        const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+        expect(dragElement.style.transform).toBe('none');
+        dragElementViaTouch(fixture, dragElement, 50, 100);
+        expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+      }));
+    });
+
     it('should dispatch an event when the user has started dragging', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggable);
       fixture.detectChanges();
@@ -5936,6 +5981,21 @@ class StandaloneDraggable {
   freeDragPosition?: {x: number, y: number};
 }
 
+@Component({
+  template: `
+    <div class="wrapper" style="width: 200px; height: 200px; background: green;">
+      <div
+        cdkDrag
+        #dragElement
+        style="transform: none; width: 100px; height: 100px; background: red;"></div>
+    </div>
+  `
+})
+class StandaloneDraggableWithInitialTransformNone {
+  @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
+  @ViewChild(CdkDrag) dragInstance: CdkDrag;
+}
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
@@ -5960,6 +6020,34 @@ class StandaloneDraggableSvg {
   @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
 }
 
+@Component({
+  template: `
+    <svg><g
+      cdkDrag
+      style="transform: none"
+      #dragElement>
+      <circle fill="red" r="50" cx="50" cy="50"/>
+    </g></svg>
+  `
+})
+class StandaloneDraggableSvgWithInitialTransformNone {
+  @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
+}
+
+@Component({
+  template: `
+    <svg width="400px" height="400px" viewBox="0 0 800 800"><g
+      cdkDrag
+      style="transform: none"
+      #dragElement>
+      <circle fill="red" r="50" cx="50" cy="50"/>
+    </g></svg>
+  `
+})
+class StandaloneDraggableSvgWithViewBoxInitialTranformNone {
+  @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
+}
+
 @Component({
   template: `
     <svg width="400px" height="400px" viewBox="0 0 800 800"><g

src/cdk/drag-drop/drag-styling.ts

@@ -82,5 +82,7 @@ export function toggleVisibility(element: HTMLElement,
  * that exited before the base transform was applied.
  */
 export function combineTransforms(transform: string, initialTransform?: string): string {
-  return initialTransform ? (transform + ' ' + initialTransform) : transform;
+  return initialTransform && initialTransform != 'none' ?
+      (transform + ' ' + initialTransform) :
+      transform;
 }