如何在拖动项目时向上或向下滚动页面，以便用户可以在 Angular 7 cdk 拖放中放置不在当前视图中的项目

问题描述

请在我的 html 和 ts 文件下面找到模拟数据。 在列表中拖动时，我想放置在当前视图中未显示的项目上，因为我需要在拖动时向上或向下滚动页面。 我如何在下面的代码中实现滚动功能 请在下面找到我的 ts 和 html 文件和图像的详细信息以供参考

**page-grid-template.component.html**
<div cdkDropListGroup>
  <div class="grid-layout-col">
    <div *ngFor="let col of tempalteConfig?.structure?.col;let i = index"
      [ngStyle]="{'height': structureMap[i]?.height+'px'}" class="{{structureMap[i]?.size + ' layout-margin'}}">
      <div *ngFor="let item of col;let ii = index" (click)="onClick(item,templateDetails[item])"
        [ngClass]="{'layout-vertical':col.length>1}" cdkDropList [cdkDropListData]="{data: item,index: ii}"
        [cdkDropListEnterPredicate]="canDropItem(templateDetails[item])"
        (cdkDropListDropped)="dropListDropped($event)">
        <div cdkDrag [cdkDragdisabled]="templateDetails[item].isHidden || isEditMode" [cdkDragData]="templateDetails[item]" 
        (cdkDragStarted)="cdkDragStarted($event)">
          <div [ngStyle]="{'min-height.px':placeHolderHeight,'min-width.px':placeHolderWidth}" class="drag-placeholder"
            *cdkDragPlaceholder></div>
          <sx-grid-layout [data]='templateDetails[item]' layout='col'></sx-grid-layout>
        </div>
        <div class="{{'Now-edit-mode-on '+ templateDetails[item].size+'-edit'}}"
          *ngIf="templateDetails[item].tempId===selectId"
          [ngStyle]="{'height':(templateDetails[item].height+'px'),'margin-top':(-templateDetails[item].height+'px')}">
        </div>
      </div>
    </div>
  </div>
  <div class="grid-layout-row">
    <div *ngFor="let row of tempalteConfig?.structure?.row" class="layout-grid">
      <div *ngFor="let item of row; let ii = index" (click)="onClick(item,templateDetails[item])"
        class="Equal layout-margin" [ngStyle]="{'height': (templateDetails[item]?.height||191)+'px'}" cdkDropList
        [cdkDropListData]="{data: item,index: ii}" 
        [cdkDropListEnterPredicate]="canDropItem(templateDetails[item])"
        (cdkDropListDropped)="dropListDropped($event)">
        <div cdkDrag [cdkDragdisabled]="templateDetails[item].isHidden || isEditMode" [cdkDragData]="templateDetails[item]" (cdkDragStarted)="cdkDragStarted($event)">
          <div [ngStyle]="{'min-height.px':placeHolderHeight,'min-width.px':placeHolderWidth}" class="drag-placeholder"
            *cdkDragPlaceholder></div>
          <sx-grid-layout [data]='templateDetails[item]' layout='row'></sx-grid-layout>
        </div>
        <div class="{{'Now-edit-mode-on '+ templateDetails[item].size+'-edit'}}"
          *ngIf="templateDetails[item].tempId===selectId"
          [ngStyle]="{'height':((templateDetails[item].height||191)+'px'),'margin-top':(-(templateDetails[item].height||191)+'px')}">
        </div>
      </div>
    </div>
  </div>
</div>
**page-grid-template.component.ts**
export class PageGridTemplateComponent implements OnInit {

  @Input('data') templateConfig: any;
  @ViewChildren('list') lists: QueryList<CdkDropList>;
  public templateDetails: any = {};
  private sizeMap = {
    'L': 'Large','M': 'Medium','S': 'Small','R': 'Equal'
  };
  private structureMap = {};
  public isRowLayoutVisible: Boolean = false;
  public screenWidth: any;

  constructor(private messageService: MessageService) {
    this.screenWidth = screen.width;
  }

  @HostListener('window:resize',['$event']) onResize(event) {
    this.screenWidth = screen.width;
  }

  ngOnInit() {
    this.messageService.notify$.subscribe(item => {
      if (item && item.option && item.option === 'grid-layout-visible') {
        this.isRowLayoutVisible = item.value.visible;
        if (!item.value.isNotScroll) {
          this.scrollToView(item.value.visible);
        }
      }
    });
    if (this.templateConfig && this.templateConfig.structure) {
      this.formatTemplateConfig(this.templateConfig);
      this.calculateHeight(this.templateConfig.structure.col);
    }
    console.log(this.templateDetails);
  }

  dropListDropped(event: CdkDragDrop<string[]>) {
     console.log(event);
    console.log(event.prevIoUsContainer);
    console.log(event.container);
    console.log(event.prevIoUsIndex);
    console.log(event.currentIndex);
    console.log(event.prevIoUsContainer === event.container);
    console.log(this.templateDetails);
      const prev = event.prevIoUsContainer.data[event.prevIoUsIndex];
      const current = event.container.data[event.currentIndex];
      const el = this.templateConfig.content;
      const prevElIndex = _.findindex(el,{ 'section_name': prev });
      const currentElIndex = _.findindex(el,{ 'section_name': current });
      el[prevElIndex].section_name = current;
      el[currentElIndex].section_name = prev;
      this.formatTemplateConfig(this.templateConfig);
      this.calculateHeight(this.templateConfig.structure.col);
  }

  formatTemplateConfig(data) {
    if (data && data.content && data.content.length) {
      data.content.forEach(element => {
        if (element.section_name) {
          if (!element.section_content) {
            element.section_content = {};
          }
          element.section_content['size'] = '';
          const char = element.section_name.charat(0);
          if (char && this.sizeMap[char]) {
            element.section_content['size'] = this.sizeMap[char];
          }
          this.templateDetails[element.section_name] = element.section_content;
        }
      });
    }
  }

  calculateHeight(structure = []) {
    structure.forEach((element,idx) => {
      const height = ((460 - (6 * (element.length - 1))) / (element.length));
      if (element.length) {
        const char = element[0].charat(0);
        this.structureMap[idx] = {};
        this.structureMap[idx]['height'] = height - 1;
        if (char && this.sizeMap[char]) {
          this.structureMap[idx]['size'] = this.sizeMap[char];
        }
      }
      element.forEach(item => {
        if (this.templateDetails[item]) {
          this.templateDetails[item]['height'] = height;
        } else {
          this.templateDetails[item] = this.structureMap[idx];
        }
      });
    });
  }
}

**My templateConfig Data format**
 {
      
        "structure": {
          "col": [
            [
              "L1"
            ],[
              "M1","M2"
            ],[
              "S1","S2","S3"
            ]
          ],"row": [
            [
              "R1-1","R1-2","R1-3","R1-4"
            ],[
              "R2-1","R2-2","R2-3","R2-4"
            ]
          ]
        },"content": [
          {
            "section_name": "L1","section_content": {}
          },{
            "section_name": "M1",{
            "section_name": "M2","section_content": {}
             
          },{
            "section_name": "S1","section_content": {}
            
            }
          ]
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）