Я не могу перетащить перетаскиваемый элемент в другой cdk-virtual-scroll-viewport , однако вызывается метод drop, и все вызовы API происходят, но когда я отпускаю кнопку мыши,выброшенные элементы возвращаются в первый список. Это происходит только в случае области просмотра, если я использую простой div, то все работает нормально. Я использовал область просмотра, потому что число элементов, которые приходили внутрь div, было слишком много, и это вызывало проблему задержки в приложении.
Ниже приведены два окна просмотра, между которыми я перетаскиваю элементы, если я заменяю'cdk-virtual-scroll-viewport' с 'div', все отлично работает, справка pLease:
<cdk-virtual-scroll-viewport itemSize="50" #allInv cdkDropList [cdkDropListData]="allInvoices" id="allInvList" class="list scrollbar" (cdkDropListDropped)="InvoiceDrop($event)">
<div *ngIf="allInvoices.length == 0 && allInvoicesSet == true">No invoice accounts left for assignment</div>
<div class="main-continer-spinner" *ngIf="!allInvoicesSet"><img src="assets/img/loading_dots.gif" style="height: 200px"></div>
<ng-container *ngIf="allInvoicesSet">
<div class="box" *cdkVirtualFor="let item of allInvoices" cdkDrag>
{{item.InvoiceAccountCode}} || {{item.LegalEntityName}} || {{item.CustomerName}}
</div>
</ng-container>
</cdk-virtual-scroll-viewport>
<cdk-virtual-scroll-viewport itemSize="50" #assInv cdkDropList [cdkDropListData]="assignedInvoices" id="assInvList" class="list scrollbar" (cdkDropListDropped)="InvoiceDrop($event)">
<div *ngIf="assignedInvoices.length == 0 && assignedInvoicesSet == true">No assigned accounts</div>
<div class="main-continer-spinner" *ngIf="!assignedInvoicesSet"><img src="assets/img/loading_dots.gif" style="height: 200px"></div>
<ng-container *ngIf="assignedInvoicesSet">
<div class="box" *cdkVirtualFor="let item of assignedInvoices" cdkDrag>
{{item.InvoiceAccountCode}} || {{item.LegalEntityName}} || {{item.CustomerName}}
</div>
</ng-container>
</cdk-virtual-scroll-viewport>