feat: add a way of setting the scroll container if not the window

Author: mattlewis92

src/drag-and-drop.module.ts

@@ -1,9 +1,18 @@
 import { NgModule } from '@angular/core';
 import { DraggableDirective } from './draggable.directive';
 import { DroppableDirective } from './droppable.directive';
+import { DraggableScrollContainerDirective } from './draggable-scroll-container.directive';
 
 @NgModule({
-  declarations: [DraggableDirective, DroppableDirective],
-  exports: [DraggableDirective, DroppableDirective]
+  declarations: [
+    DraggableDirective,
+    DroppableDirective,
+    DraggableScrollContainerDirective
+  ],
+  exports: [
+    DraggableDirective,
+    DroppableDirective,
+    DraggableScrollContainerDirective
+  ]
 })
 export class DragAndDropModule {}

src/draggable-scroll-container.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[mwlDraggableScrollContainer]'
+})
+export class DraggableScrollContainerDirective {
+  constructor(public elementRef: ElementRef) {}
+}

src/droppable.directive.ts

@@ -7,11 +7,13 @@ import {
   EventEmitter,
   NgZone,
   Input,
-  Renderer2
+  Renderer2,
+  Optional
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { distinctUntilChanged, pairwise, filter, map } from 'rxjs/operators';
 import { DraggableHelper } from './draggable-helper.provider';
+import { DraggableScrollContainerDirective } from './draggable-scroll-container.directive';
 
 function isCoordinateWithinRectangle(
   clientX: number,
@@ -70,7 +72,8 @@ export class DroppableDirective implements OnInit, OnDestroy {
     private element: ElementRef<HTMLElement>,
     private draggableHelper: DraggableHelper,
     private zone: NgZone,
-    private renderer: Renderer2
+    private renderer: Renderer2,
+    @Optional() private scrollContainer: DraggableScrollContainerDirective
   ) {}
 
   ngOnInit() {
@@ -84,7 +87,9 @@ export class DroppableDirective implements OnInit, OnDestroy {
 
         /* istanbul ignore next */
         const deregisterScrollListener = this.renderer.listen(
-          'window',
+          this.scrollContainer
+            ? this.scrollContainer.elementRef.nativeElement
+            : 'window',
           'scroll',
           () => {
             droppableRectangle = this.element.nativeElement.getBoundingClientRect();

test/droppable.directive.spec.ts

@@ -5,8 +5,8 @@ import * as sinon from 'sinon';
 import { triggerDomEvent } from './util';
 import { DragAndDropModule } from '../src/index';
 import { DraggableDirective } from '../src/draggable.directive';
-import { st } from '@angular/core/src/render3';
 import { DroppableDirective } from '../src/droppable.directive';
+import { DraggableScrollContainerDirective } from '../src/draggable-scroll-container.directive';
 
 describe('droppable directive', () => {
   @Component({
@@ -64,10 +64,28 @@ describe('droppable directive', () => {
     dragActiveClass: string;
   }
 
+  @Component({
+    // tslint:disable-line max-classes-per-file
+    template: `
+      <div mwlDraggableScrollContainer>
+        <div
+          #droppableElement
+          mwlDroppable>
+          Drop here
+        </div>
+      </div>
+    `
+  })
+  class ScrollTestComponent {
+    @ViewChild(DroppableDirective) droppable: DroppableDirective;
+    @ViewChild(DraggableScrollContainerDirective)
+    scrollContainer: DraggableScrollContainerDirective;
+  }
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [DragAndDropModule],
-      declarations: [TestComponent]
+      declarations: [TestComponent, ScrollTestComponent]
     });
   });
 
@@ -228,4 +246,12 @@ describe('droppable directive', () => {
     fixture = TestBed.createComponent(TestComponent);
     expect(() => fixture.destroy()).not.to.throw();
   });
+
+  it('should link the droppable element to the scroll container', () => {
+    const scrollFixture = TestBed.createComponent(ScrollTestComponent);
+    scrollFixture.detectChanges();
+    expect(
+      scrollFixture.componentInstance.droppable['scrollContainer']
+    ).to.equal(scrollFixture.componentInstance.scrollContainer);
+  });
 });