Trying to Implement

[gabrielkunkel]

I'm a little new to Angular. I'm have trouble using this in my application. I'd love to see the demo code as a reference. I really need to be able to control the scrolling container and this seems to be the best route to take at the moment, since there's a pull-request on hold in the components library.

I have put vsDragScroll [vsDragScrollContainer]="scrollContainer" into my template, but I'm not sure where to go from here. What would "scrollContainer" be on the component?

Do I have to add this as a module?

How do I import this?

I will kindly update the README.md if you could help me out. Thanks.

[ismailkoksal]

app.component.html

<div #scrollContainer
     cdkDropList
     (cdkDropListDropped)="drop($event)"
     class="example-list">
  <div *ngFor="let movie of movies"
       cdkDrag
       vsDragScroll
       [vsDragScrollContainer]="scrollContainer"
       [cdkDragData]="movie"
       class="example-box">
    {{movie}}
  </div>
</div>

app.component.ts

import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the Clones',
    'Episode III - Revenge of the Sith',
    'Episode IV - A New Hope',
    'Episode V - The Empire Strikes Back',
    'Episode VI - Return of the Jedi',
    'Episode VII - The Force Awakens',
    'Episode VIII - The Last Jedi',
    'Episode IX – The Rise of Skywalker'
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }
}

app.component.scss

.example-list {
  height: 250px;
  width: 500px;
  max-width: 100%;
  border: solid 1px #ccc;
  min-height: 60px;
  display: block;
  background: white;
  border-radius: 4px;
  overflow: auto;
}

.example-box {
  padding: 20px 10px;
  border-bottom: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: move;
  background: white;
  font-size: 14px;
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
  0 8px 10px 1px rgba(0, 0, 0, 0.14),
  0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-box:last-child {
  border: none;
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}