带有原生 CDK 的 Angular 7 拖放嵌套列表 [英] Angular 7 Drag&Drop nested lists with native CDK

问题描述

我正在使用 @angular/cdk/drag-drop 提供的原生 Angular 7 Drag&Drop.

基本上，我只需要在另一个列表中创建一个可排序列表，如下面的代码所示:

<div class="external-item" cdkDrag *ngFor="let item of items">{{item.header}}<div class="internal-list" cdkDropList (cdkDropListDropped)="drop2($event)"><div class="internal-item" cdkDrag *ngFor="let row of item.rows">{{排}}

这是一个非常示意性的例子，只是为了说明目的.

问题是当我尝试拖动内部项目时，外部项目被拖动.

如何在不求助于 3rd 方软件包的情况下解决此问题?

解决方案

我认为您需要使用拖动手柄(cdkDrag 内的元素上的cdkDragHandle)，至少对于父列表.

https://material.angular.io/cdk/drag-drop/overview#customizing-the-drag-area-using-a-handle

I am using native Angular 7 Drag&Drop provided by @angular/cdk/drag-drop.

Basically, I just need to create one sortable list inside another one as in the code below:

<div class="external-list" cdkDropList (cdkDropListDropped)="drop1($event)">
  <div class="external-item" cdkDrag *ngFor="let item of items">
    {{item.header}}
    <div class="internal-list" cdkDropList (cdkDropListDropped)="drop2($event)">
      <div class="internal-item" cdkDrag *ngFor="let row of item.rows">
        {{row}}
      </div>
    </div>
  </div>
</div>

This is a very schematic example just to demonstrate the purpose.

The problem is when I try dragging the inner items outer ones are dragged instead.

How can I solve this without resorting to 3rd-party packages?

解决方案

I think you will need to use a drag handle (cdkDragHandle on an element inside cdkDrag), at least for the parent list.

https://material.angular.io/cdk/drag-drop/overview#customizing-the-drag-area-using-a-handle

这篇关于带有原生 CDK 的 Angular 7 拖放嵌套列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！