首页
其他开发
Angular Nested Drag and Drop/CDK Material cdkDropListGroup cdkDropList 嵌套

Angular Nested Drag and Drop/CDK Material cdkDropListGroup cdkDropList 嵌套 [英] Angular Nested Drag and Drop / CDK Material cdkDropListGroup cdkDropList nested

查看：35 发布时间：2021/11/10 1:35:18 angular angular-material drag-and-drop angular-cdk

本文介绍了Angular Nested Drag and Drop/CDK Material cdkDropListGroup cdkDropList 嵌套的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 CDK Material 拖放实用程序来创建启用拖放功能的表单编辑器.

它工作正常，但在 cdkDropListGroup 中嵌套 cdkDropList 不起作用.我无法将任何内容拖入嵌套的下拉列表容器.


<div class="row";cdkDropListGroup><div class="col-2"><div id="工具箱"cdkDropList>...

<div class="col-10"><div id="formContainer";cdkDropList>...<div class="row"><div class="col-md-6";cdkDropList>...第1栏内容

<div class="col-md-6";cdkDropList>...第1栏内容

解决方案

我花了一些时间，但我终于找到了解决方案，感谢那些帖子中的提示:

I use CDK Material Drag and Drop utilities to create a form editor with drag and drop enabled.

It works fine, but nesting a cdkDropList within a cdkDropListGroup does not work. I'm not able to drag anything into the nested drop list container.
```
<div class="container">
  <div class="row" cdkDropListGroup>
    <div class="col-2">
      <div id="toolbox" cdkDropList>
        ...
      </div>
    </div>
    <div class="col-10">
      <div id="formContainer" cdkDropList>
        ...
        <div class="row">
          <div class="col-md-6" cdkDropList>
            ... column 1 content
          </div>
          <div class="col-md-6" cdkDropList>
            ... column 1 content
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```
解决方案
It took me some time but I finally found a solution thanks to the hints from that posts:
- https://github.com/angular/components/issues/14093#issuecomment-462395200
- https://stackoverflow.com/a/59758611/4549486
The problem is that the cdkDropListGroup does not support nested drop lists. You need to connect the drop lists with the [cdkDropListConnectedTo] binding.

But if you only connect the lists to an array for the [cdkDropListConnectedTo] binding the list order has a affect to the drop behavior. In addition, sorting within a nested drop list won't work.

To avoid those problems, you need to create a service that looks for the correct cdkDropList while dragging.
```
export class DragDropService {
  dropLists: CdkDropList[] = [];
  currentHoverDropListId?: string;

  constructor(@Inject(DOCUMENT) private document: Document) {}

  public register(dropList: CdkDropList) {
    this.dropLists.push(dropList);
  }

  dragMoved(event: CdkDragMove<IFormControl>) {
    let elementFromPoint = this.document.elementFromPoint(
      event.pointerPosition.x,
      event.pointerPosition.y
    );

    if (!elementFromPoint) {
      this.currentHoverDropListId = undefined;
      return;
    }

    let dropList = elementFromPoint.classList.contains('cdk-drop-list')
      ? elementFromPoint
      : elementFromPoint.closest('.cdk-drop-list');

    if (!dropList) {
      this.currentHoverDropListId = undefined;
      return;
    }

    this.currentHoverDropListId = dropList.id;
  }

  dragReleased(event: CdkDragRelease) {
    this.currentHoverDropListId = undefined;
  }
}
```
- register adds a new drop list to the dropList array that is used by each cdkDropList.
- dragMoved determines the correct cdkDropList beneath the mouse pointer.
The best thing is to create a own component that holds a cdkDropList.

The following component is just for simplicity and demonstration purposes. You should not use service properties directly.
```
<div
  *ngIf="container"
  cdkDropList
  [cdkDropListData]="container.controls"
  [cdkDropListConnectedTo]="dragDropService.dropLists"
  [cdkDropListEnterPredicate]="allowDropPredicate"
  (cdkDropListDropped)="dropped($event)"
>
  <div
    *ngFor="let item of container.controls"
    cdkDrag
    [cdkDragData]="item"
    (cdkDragMoved)="dragMoved($event)"
    (cdkDragReleased)="dragReleased($event)"
  >
    Drag Content
  </div>
</div>
```
```
export class FormContainerComponent implements OnInit, AfterViewInit {
  @ViewChild(CdkDropList) dropList?: CdkDropList;
  @Input() container: IFormContainer | undefined;

  allowDropPredicate = (drag: CdkDrag, drop: CdkDropList) => {
    return this.isDropAllowed(drag, drop);
  };

  constructor(
    public dragDropService: DragDropService
  ) {}
  ngOnInit(): void {}

  ngAfterViewInit(): void {
    if (this.dropList) {
      this.dragDropService.register(this.dropList);
    }
  }
  dropped(event: CdkDragDrop<IFormControl[]>) {
    // Your drop logic
  }

  isDropAllowed(drag: CdkDrag, drop: CdkDropList) {
    if (this.dragDropService.currentHoverDropListId == null) {
      return true;
    }

    return drop.id === this.dragDropService.currentHoverDropListId;
  }

  dragMoved(event: CdkDragMove<IFormControl>) {
    this.dragDropService.dragMoved(event);
  }

  dragReleased(event: CdkDragRelease) {
    this.dragDropService.dragReleased(event);
  }
}
```
- Whenever a cdkDrag is moved, dragMoved determines the correct cdkDropList
- Whenever a cdkDrag is released, reset the determined cdkDropList
- The most important method is the isDropAllowed method that is set as [cdkDropListEnterPredicate]="allowDropPredicate" to the cdkDropList
  - As mentioned before, cdk material is not able to determine the correct drop list.
  - If there is a wrong drop list selected by cdk, we just disallow the drop by returning false. In that case, cdk automatically selects the next possible cdkDropList which is the correct one :)
这篇关于Angular Nested Drag and Drop/CDK Material cdkDropListGroup cdkDropList 嵌套的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.

Angular Nested Drag and Drop/CDK Material cdkDropListGroup cdkDropList 嵌套 [英] Angular Nested Drag and Drop / CDK Material cdkDropListGroup cdkDropList nested

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭