Angular - 可排序的嵌套拖放

Question

我目前正在开发一个 Angular 应用程序，我想在其中实现嵌套的拖放功能，它还应该可以对自己列表中的项目进行排序。

有一个很棒的 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)">

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

我还制作了另一个堆栈闪电战，我将代码更改为使用模板递归而不是组件。你可以找到代码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>

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

有人可以帮我吗？我知道有一些第三方 angular npms，但我认为这应该可以通过使用 angular 材料来实现。

Answer 1

我通过处理cdkDropList 中的cdkDropListEnterPredicate 找到了解决方案。基本上，我检查带有.cdk-drag-preview 的元素是否在容器中，同时通过拖放移动以及围绕嵌套子项进行一些其他检查。