fix(draggable): make the dragEnd output respect the validateDrag input

Author: Matt Lewis

src/draggable.directive.ts

@@ -135,6 +135,7 @@ export class Draggable implements OnInit, OnDestroy {
             return isInside(this.dragContainer.getBoundingClientRect(), newRect);
 
           })
+          .filter(({x, y}) => !this.validateDrag || this.validateDrag({x, y}))
           .takeUntil(Observable.merge(this.mouseUp, this.mouseDown));
 
         mouseMove.takeLast(1).subscribe(({x, y}) => {
@@ -149,7 +150,6 @@ export class Draggable implements OnInit, OnDestroy {
         return mouseMove;
 
       })
-      .filter(({x, y}) => !this.validateDrag || this.validateDrag({x, y}))
       .share();
 
     Observable

test/draggable.directive.spec.ts

@@ -249,6 +249,10 @@ describe('draggable directive', () => {
     expect(fixture.componentInstance.dragging).not.to.have.been.calledWith({x: 2, y: -2});
     triggerDomEvent('mousemove', draggableElement, {clientX: 7, clientY: 12});
     expect(fixture.componentInstance.dragging).to.have.been.calledWith({x: 2, y: 2});
+    triggerDomEvent('mousemove', draggableElement, {clientX: 3, clientY: 10});
+    expect(fixture.componentInstance.dragging).not.to.have.been.calledWith({x: -2, y: 0});
+    triggerDomEvent('mouseup', draggableElement, {clientX: 3, clientY: 10});
+    expect(fixture.componentInstance.dragEnd).to.have.been.calledWith({x: 2, y: 2});
   });
 
   it('should only call the dragEnd event once', () => {