feat(drag-drop): add support for multiple handles and handles that are added after init

* Fixes a TODO about supporting handles that are added after init.
* Adds the ability to have more than one handle in a draggable.
* Moves some parameters around in the event faking utils to allow for the event target to be set.

Author: crisbeto

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

@@ -6,6 +6,7 @@ import {
   ViewChildren,
   QueryList,
   AfterViewInit,
+  ViewEncapsulation,
 } from '@angular/core';
 import {TestBed, ComponentFixture, fakeAsync, flush} from '@angular/core/testing';
 import {DragDropModule} from './drag-drop-module';
@@ -14,6 +15,7 @@ import {CdkDrag} from './drag';
 import {CdkDragDrop} from './drag-events';
 import {moveItemInArray, transferArrayItem} from './drag-utils';
 import {CdkDrop} from './drop';
+import {CdkDragHandle} from './drag-handle';
 
 const ITEM_HEIGHT = 25;
 
@@ -136,9 +138,40 @@ describe('CdkDrag', () => {
       const handle = fixture.componentInstance.handleElement.nativeElement;
 
       expect(dragElement.style.transform).toBeFalsy();
-      dragElementViaMouse(fixture, handle, 50, 100);
+      dragElementViaMouse(fixture, dragElement, 50, 100, handle);
       expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
     }));
+
+    it('should be able to use a handle that was added after init', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggableWithDelayedHandle);
+
+      fixture.detectChanges();
+      fixture.componentInstance.showHandle = true;
+      fixture.detectChanges();
+
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+      const handle = fixture.componentInstance.handleElement.nativeElement;
+
+      expect(dragElement.style.transform).toBeFalsy();
+      dragElementViaMouse(fixture, dragElement, 50, 100, handle);
+      expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+    }));
+
+    it('should be able to use more than one handle to drag the element', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggableWithMultipleHandles);
+      fixture.detectChanges();
+
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+      const handles = fixture.componentInstance.handles.map(handle => handle.element.nativeElement);
+
+      expect(dragElement.style.transform).toBeFalsy();
+      dragElementViaMouse(fixture, dragElement, 50, 100, handles[1]);
+      expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+
+      dragElementViaMouse(fixture, dragElement, 100, 200, handles[0]);
+      expect(dragElement.style.transform).toBe('translate3d(150px, 300px, 0px)');
+    }));
+
   });
 
   describe('in a drop container', () => {
@@ -415,9 +448,48 @@ export class StandaloneDraggable {
 export class StandaloneDraggableWithHandle {
   @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
   @ViewChild('handleElement') handleElement: ElementRef<HTMLElement>;
-  @ViewChild(CdkDrag) dragInstance: CdkDrag;
 }
 
+@Component({
+  template: `
+    <div #dragElement cdkDrag
+      style="width: 100px; height: 100px; background: red; position: relative">
+      <div
+        #handleElement
+        *ngIf="showHandle"
+        cdkDragHandle style="width: 10px; height: 10px; background: green;"></div>
+    </div>
+  `
+})
+export class StandaloneDraggableWithDelayedHandle {
+  @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
+  @ViewChild('handleElement') handleElement: ElementRef<HTMLElement>;
+  showHandle = false;
+}
+
+@Component({
+  encapsulation: ViewEncapsulation.None,
+  styles: [`
+    .cdk-drag-handle {
+      position: absolute;
+      top: 0;
+      background: green;
+      width: 10px;
+      height: 10px;
+    }
+  `],
+  template: `
+    <div #dragElement cdkDrag
+      style="width: 100px; height: 100px; background: red; position: relative">
+      <div cdkDragHandle style="left: 0;"></div>
+      <div cdkDragHandle style="right: 0;"></div>
+    </div>
+  `
+})
+export class StandaloneDraggableWithMultipleHandles {
+  @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
+  @ViewChildren(CdkDragHandle) handles: QueryList<CdkDragHandle>;
+}
 
 @Component({
   template: `
@@ -542,11 +614,12 @@ export class ConnectedDropZones implements AfterViewInit {
  * @param element Element which is being dragged.
  * @param x Position along the x axis to which to drag the element.
  * @param y Position along the y axis to which to drag the element.
+ * @param eventTarget Event to be passed as the target to the event handler.
  */
 function dragElementViaMouse(fixture: ComponentFixture<any>,
-    element: HTMLElement, x: number, y: number) {
+    element: HTMLElement, x: number, y: number, eventTarget = element) {
 
-  dispatchMouseEvent(element, 'mousedown');
+  dispatchMouseEvent(element, 'mousedown', undefined, undefined, eventTarget);
   fixture.detectChanges();
 
   dispatchMouseEvent(document, 'mousemove', x, y);
@@ -562,11 +635,12 @@ function dragElementViaMouse(fixture: ComponentFixture<any>,
  * @param element Element which is being dragged.
  * @param x Position along the x axis to which to drag the element.
  * @param y Position along the y axis to which to drag the element.
+ * @param eventTarget Event to be passed as the target to the event handler.
  */
 function dragElementViaTouch(fixture: ComponentFixture<any>,
-    element: HTMLElement, x: number, y: number) {
+    element: HTMLElement, x: number, y: number, eventTarget = element) {
 
-  dispatchTouchEvent(element, 'touchstart');
+  dispatchTouchEvent(element, 'touchstart', undefined, undefined, eventTarget);
   fixture.detectChanges();
 
   dispatchTouchEvent(document, 'touchmove', x, y);

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

@@ -20,6 +20,8 @@ import {
   EventEmitter,
   ViewContainerRef,
   EmbeddedViewRef,
+  ContentChildren,
+  QueryList,
 } from '@angular/core';
 import {CdkDragHandle} from './drag-handle';
 import {DOCUMENT} from '@angular/platform-browser';
@@ -41,6 +43,8 @@ const activeEventOptions = supportsPassiveEventListeners() ? {passive: false} :
   exportAs: 'cdkDrag',
   host: {
     'class': 'cdk-drag',
+    '(mousedown)': '_startDragging($event)',
+    '(touchstart)': '_startDragging($event)',
   }
 })
 export class CdkDrag implements AfterContentInit, OnDestroy {
@@ -84,8 +88,8 @@ export class CdkDrag implements AfterContentInit, OnDestroy {
   /** Drop container in which the CdkDrag resided when dragging began. */
   private _initialContainer: CdkDropContainer;
 
-  /** Element that can be used to drag the draggable item. */
-  @ContentChild(CdkDragHandle) _handle: CdkDragHandle;
+  /** Elements that can be used to drag the draggable item. */
+  @ContentChildren(CdkDragHandle) _handles: QueryList<CdkDragHandle>;
 
   /** Element that will be used as a template to create the draggable item's preview. */
   @ContentChild(CdkDragPreview) _previewTemplate: CdkDragPreview;
@@ -130,11 +134,6 @@ export class CdkDrag implements AfterContentInit, OnDestroy {
   }
 
   ngAfterContentInit() {
-    // TODO: doesn't handle (pun intended) the handle being destroyed
-    const dragElement = (this._handle ? this._handle.element : this.element).nativeElement;
-    dragElement.addEventListener('mousedown', this._pointerDown);
-    dragElement.addEventListener('touchstart', this._pointerDown);
-
     // Webkit won't preventDefault on a dynamically-added `touchmove` listener, which means that
     // we need to add one ahead of time. See https://bugs.webkit.org/show_bug.cgi?id=184250.
     // TODO: move into a central registry.
@@ -157,8 +156,27 @@ export class CdkDrag implements AfterContentInit, OnDestroy {
     }
   }
 
+  /** Starts the dragging sequence. */
+  _startDragging(event: MouseEvent | TouchEvent) {
+    // Delegate the event based on whether it started from a handle or the element itself.
+    if (this._handles.length) {
+      const targetHandle = this._handles.find(handle => {
+        const element = handle.element.nativeElement;
+        const target = event.target;
+        return !!target && (target === element || element.contains(target as HTMLElement));
+      });
+
+      if (targetHandle) {
+        this._pointerDown(targetHandle.element, event);
+      }
+    } else {
+      this._pointerDown(this.element, event);
+    }
+  }
+
   /** Handler for when the pointer is pressed down on the element or the handle. */
-  private _pointerDown = (event: MouseEvent | TouchEvent) => {
+  private _pointerDown = (referenceElement: ElementRef<HTMLElement>,
+                          event: MouseEvent | TouchEvent) => {
     if (this._isDragging) {
       return;
     }
@@ -169,7 +187,7 @@ export class CdkDrag implements AfterContentInit, OnDestroy {
     // If we have a custom preview template, the element won't be visible anyway so we avoid the
     // extra `getBoundingClientRect` calls and just move the preview next to the cursor.
     this._pickupPositionInElement = this._previewTemplate ? {x: 0, y: 0} :
-        this._getPointerPositionInElement(event);
+        this._getPointerPositionInElement(referenceElement, event);
     this._pickupPositionOnPage = this._getPointerPositionOnPage(event);
     this._registerMoveListeners(event);
 
@@ -365,11 +383,13 @@ export class CdkDrag implements AfterContentInit, OnDestroy {
 
   /**
    * Figures out the coordinates at which an element was picked up.
+   * @param referenceElement Element that initiated the dragging.
    * @param event Event that initiated the dragging.
    */
-  private _getPointerPositionInElement(event: MouseEvent | TouchEvent): Point {
+  private _getPointerPositionInElement(referenceElement: ElementRef<HTMLElement>,
+                                       event: MouseEvent | TouchEvent): Point {
     const elementRect = this.element.nativeElement.getBoundingClientRect();
-    const handleElement = this._handle ? this._handle.element.nativeElement : null;
+    const handleElement = referenceElement === this.element ? null : referenceElement.nativeElement;
     const referenceRect = handleElement ? handleElement.getBoundingClientRect() : elementRect;
     const x = this._isTouchEvent(event) ? event.targetTouches[0].pageX - referenceRect.left :
                                           event.offsetX;

src/cdk/testing/dispatch-events.ts

@@ -25,18 +25,18 @@ export function dispatchFakeEvent(node: Node | Window, type: string, canBubble?:
 }
 
 /** Shorthand to dispatch a keyboard event with a specified key code. */
-export function dispatchKeyboardEvent(node: Node, type: string, keyCode: number, target?: Element):
-    KeyboardEvent {
+export function dispatchKeyboardEvent(node: Node, type: string, keyCode: number,
+    target?: EventTarget): KeyboardEvent {
   return dispatchEvent(node, createKeyboardEvent(type, keyCode, target)) as KeyboardEvent;
 }
 
 /** Shorthand to dispatch a mouse event on the specified coordinates. */
-export function dispatchMouseEvent(node: Node, type: string, x = 0, y = 0,
-  event = createMouseEvent(type, x, y)): MouseEvent {
-  return dispatchEvent(node, event) as MouseEvent;
+export function dispatchMouseEvent(node: Node, type: string, x = 0, y = 0, target = node):
+    MouseEvent {
+  return dispatchEvent(node, createMouseEvent(type, x, y, target)) as MouseEvent;
 }
 
 /** Shorthand to dispatch a touch event on the specified coordinates. */
-export function dispatchTouchEvent(node: Node, type: string, x = 0, y = 0) {
-  return dispatchEvent(node, createTouchEvent(type, x, y));
+export function dispatchTouchEvent(node: Node, type: string, x = 0, y = 0, target = node) {
+  return dispatchEvent(node, createTouchEvent(type, x, y, target));
 }

src/cdk/testing/event-objects.ts

@@ -7,7 +7,7 @@
  */
 
 /** Creates a browser MouseEvent with the specified options. */
-export function createMouseEvent(type: string, x = 0, y = 0) {
+export function createMouseEvent(type: string, x = 0, y = 0, target?: EventTarget) {
   const event = document.createEvent('MouseEvent');
 
   event.initMouseEvent(type,
@@ -26,11 +26,17 @@ export function createMouseEvent(type: string, x = 0, y = 0) {
     0, /* button */
     null /* relatedTarget */);
 
+  if (target) {
+    Object.defineProperty(event, 'target', {
+      get: () => target
+    });
+  }
+
   return event;
 }
 
 /** Creates a browser TouchEvent with the specified pointer coordinates. */
-export function createTouchEvent(type: string, pageX = 0, pageY = 0) {
+export function createTouchEvent(type: string, pageX = 0, pageY = 0, target?: EventTarget) {
   // In favor of creating events that work for most of the browsers, the event is created
   // as a basic UI Event. The necessary details for the event will be set manually.
   const event = document.createEvent('UIEvent');
@@ -42,14 +48,16 @@ export function createTouchEvent(type: string, pageX = 0, pageY = 0) {
   // the touch details.
   Object.defineProperties(event, {
     touches: {value: [touchDetails]},
-    targetTouches: {value: [touchDetails]}
+    targetTouches: {value: [touchDetails]},
+    target: {value: target}
   });
 
   return event;
 }
 
 /** Dispatches a keydown event from an element. */
-export function createKeyboardEvent(type: string, keyCode: number, target?: Element, key?: string) {
+export function createKeyboardEvent(type: string, keyCode: number, target?: EventTarget,
+    key?: string) {
   let event = document.createEvent('KeyboardEvent') as any;
   // Firefox does not support `initKeyboardEvent`, but supports `initKeyEvent`.
   let initEventFn = (event.initKeyEvent || event.initKeyboardEvent).bind(event);
@@ -60,9 +68,9 @@ export function createKeyboardEvent(type: string, keyCode: number, target?: Elem
   // Webkit Browsers don't set the keyCode when calling the init function.
   // See related bug https://bugs.webkit.org/show_bug.cgi?id=16735
   Object.defineProperties(event, {
-    keyCode: { get: () => keyCode },
-    key: { get: () => key },
-    target: { get: () => target }
+    keyCode: {get: () => keyCode},
+    key: {get: () => key},
+    target: {get: () => target}
   });
 
   // IE won't set `defaultPrevented` on synthetic events so we need to do it manually.

src/lib/menu/menu.spec.ts

@@ -1512,7 +1512,7 @@ describe('MatMenu', () => {
       Object.defineProperty(event, 'buttons', {get: () => 1});
       event.preventDefault = jasmine.createSpy('preventDefault spy');
 
-      dispatchMouseEvent(overlay.querySelector('[mat-menu-item]')!, 'mousedown', 0, 0, event);
+      dispatchEvent(overlay.querySelector('[mat-menu-item]')!, event);
       expect(event.preventDefault).toHaveBeenCalled();
     });