feat: expose ghost element and starting mouse position on ghost element created event

Closes #81
Closes #85

Author: mattlewis92

projects/angular-draggable-droppable/src/lib/draggable.directive.spec.ts

@@ -689,6 +689,21 @@ describe('draggable directive', () => {
     expect(draggableElement.style.visibility).not.to.be.ok;
   });
 
+  it('should expose the mouse coordinates and ghost element', () => {
+    const draggableElement =
+      fixture.componentInstance.draggableElement.nativeElement;
+    triggerDomEvent('mousedown', draggableElement, { clientX: 5, clientY: 10 });
+    triggerDomEvent('mousemove', draggableElement, { clientX: 6, clientY: 10 });
+    const ghostElement = draggableElement.nextSibling as HTMLElement;
+    expect(
+      fixture.componentInstance.ghostElementCreated
+    ).to.have.been.calledWith({
+      element: ghostElement,
+      clientX: 5,
+      clientY: 10
+    });
+  });
+
   it('should create a clone of the element and leave old element visible', () => {
     fixture.componentInstance.showOriginalElementWhileDragging = true;
     fixture.detectChanges();

projects/angular-draggable-droppable/src/lib/draggable.directive.ts

@@ -72,6 +72,12 @@ export interface TimeLongPress {
   timerEnd: number;
 }
 
+export interface GhostElementCreatedEvent {
+  clientX: number;
+  clientY: number;
+  element: HTMLElement;
+}
+
 @Directive({
   selector: '[mwlDraggable]'
 })
@@ -154,7 +160,7 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
    * Called after the ghost element has been created
    */
   @Output()
-  ghostElementCreated = new EventEmitter();
+  ghostElementCreated = new EventEmitter<GhostElementCreatedEvent>();
 
   /**
    * Called when the element is being dragged
@@ -338,7 +344,7 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
           share()
         );
 
-        dragStarted$.subscribe(() => {
+        dragStarted$.subscribe(({ clientX, clientY, x, y }) => {
           this.zone.run(() => {
             this.dragStart.next({ cancelDrag$ });
           });
@@ -398,7 +404,11 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
             }
 
             this.zone.run(() => {
-              this.ghostElementCreated.emit();
+              this.ghostElementCreated.emit({
+                clientX: clientX - x,
+                clientY: clientY - y,
+                element: clone
+              });
             });
 
             dragEnded$.subscribe(() => {

projects/angular-draggable-droppable/src/public_api.ts

@@ -8,5 +8,6 @@ export {
   DragPointerDownEvent,
   DragStartEvent,
   DragMoveEvent,
-  DragEndEvent
+  DragEndEvent,
+  GhostElementCreatedEvent
 } from './lib/draggable.directive';