Question

我目前正在开发一个有角度的应用程序，我想实现一个嵌套的拖放特性，在这里应该也可以对自己列表中的项目进行排序。

有一个很棒的stackblitz示例，说明如何实现嵌套拖拽，您可以找到here。

因此，基本上，我做了一些小的更改，包括拖放时显示占位符以及将<ul>移到cdkDrag div中。

<div cdkDropList
class="item-dropzone parent"
[id]="parentItemId"
[cdkDropListData]="parentItem"
[cdkDropListConnectedTo]="allDropListsIds"
(cdkDropListDropped)="onDragDrop($event)">
<div cdkDrag
    [id]="item.uId"
    [cdkDragData]="item"
    [cdkDragDisabled]="dragDisabled">
    <div title="Drag this item with children"
        class="item-drag-handle"
        cdkDragHandle>
        {{item.name}}
        <i *ngIf="!dragDisabled"
            class="material-icons">
            drag_indicator
        </i>
    </div>
    <ul cdkDropList
        class="item-dropzone"
        [id]="item.uId"
        [cdkDropListConnectedTo]="connectedDropListsIds"
        [cdkDropListData]="item"
        (cdkDropListDropped)="onDragDrop($event)">
        <li *ngFor="let subItem of item.children">
            <list-item [item]="subItem"
                [parentItem]="item"
                [connectedDropListsIds]="allDropListsIds"
                (itemDrop)="onDragDrop($event)">
            </list-item>
        </li>
    </ul>
</div>

当parentItem == null与

一起使用时，我试图做一个特例

<div *ngIf="parentItem == null;then content else other_content">here is ignored</div>    
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template

但是我无法使其正常工作。所以基本上，这里的问题是这部分：

<div cdkDropList
    class="item-dropzone parent"
    [id]="parentItemId"
    [cdkDropListData]="parentItem"
    [cdkDropListConnectedTo]="allDropListsIds"
    (cdkDropListDropped)="onDragDrop($event)">

如果我没记错的话，总是只有一个孩子。

我还做了另一个stackblitz，在其中我更改了代码以使用模板递归而不是组件。您可以找到代码here

<ng-template #recursiveList
               let-list>
<li *ngFor="let item of list" cdkDrag
    [id]="item.uId"
    [cdkDragData]="item"
    [cdkDragDisabled]="dragDisabled">
    <div title="Drag this item with children"
        class="item-drag-handle"
        cdkDragHandle>
        {{item.name}}
        <i *ngIf="!dragDisabled"
            class="material-icons">
            drag_indicator
        </i>
    </div>
    <ul cdkDropList
        class="item-dropzone"
        [cdkDropListConnectedTo]="connectedDropListsIds"
        [cdkDropListData]="item"
        (cdkDropListDropped)="onDragDrop($event)">
          <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
    </ul>
</li>

<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: parentItem.children }"></ng-container>

不幸的是，拖放操作在这里不起作用，但是我认为从结构上看，这应该没问题

有人可以在这里帮助我吗？我知道有一些第三方的角度npms，但我认为仅使用角度材料就可以做到这一点。

Answer 1

我通过处理cdkDropListEnterPredicate中的cdkDropList找到了解决方案。基本上，我在拖动n'drop和嵌套子项周围的其他一些检查时，检查带有.cdk-drag-preview的元素是否在容器中。

角度-可排序的嵌套拖拽

1 个答案: