Angular 7 Drag & Drop вложенные списки с собственным CDK

Я использую собственный Angular 7 Drag & Drop, предоставленный @angular/cdk/drag-drop.

По сути, мне просто нужно создать один сортируемый список внутри другого, как в приведенном ниже коде:

<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>

Это очень схематический пример, демонстрирующий цель.

Проблема в том, что когда я пытаюсь перетащить внутренние элементы, вместо этого перетаскиваются внешние.

Как я могу решить эту проблему, не прибегая к сторонним пакетам?


angular drag-and-drop angular7
person Andrii Romanchak    schedule 02.11.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, вам нужно будет использовать ручку перетаскивания (cdkDragHandle на элементе внутри cdkDrag), по крайней мере, для родительского списка.

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

person user3910610    schedule 08.11.2018
comment
Спасибо за ответ. Я считаю, что можно добиться желаемого поведения, но это, вероятно, потребует некоторого грязного обходного пути с переработкой макета (перемещение дочерних перетаскиваемых элементов из родительских перетаскиваемых элементов и использование position: absolute для их размещения в нужных местах). - person Andrii Romanchak; 09.11.2018