Я не могу перетащить перетаскиваемый элемент в другой cdk-virtual-scroll-viewport при использовании виртуальной прокрутки и перетаскивания в двух окнах просмотра - PullRequest
0 голосов
/ 01 ноября 2019

Я не могу перетащить перетаскиваемый элемент в другой 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>

...