问题
I am trying to implement ngx-virtual-scroll and ng2-dragula together
here is my current Stackblitz UPDATED : Stackblitz
The problem is the following :
<virtual-scroller #scroll2 [id]="myGroupId" [dragula]="myGroupId" [(dragulaModel)]="myList.list2" [items]="myList.list2" class="virtual-scroller">
<div class="virtual-scroller-element" *ngFor="let card of myList.list2; let i = index ">{{myList.list2[i]}}</div>
</virtual-scroller>
for Dragula to work, there must be no HTML in between the group declaration [dragula]="myGroupId"
and the items to drag.
But almost any virtual scroller lib, included this one, create item inside a div. that is auto generate by the package. And therefor, my full div will be drag gable.
I would like to know if you have any tweaks to make it work ?
回答1:
I haven't used it before but this seems to do the trick (i don't know about the visuals, i guess it can be tuned, but functionally it works). please test:
<div class="virtual-scroller-container">
<div class="virtual-scroller-column">
<virtual-scroller #scroll1 [id]="myGroupId" [items]="myList.list1" class="virtual-scroller">
<div class='container' [dragula]="myGroupId" [(dragulaModel)]="myList.list1">
<div class="virtual-scroller-element" *ngFor="let card of myList.list1; let i = index ">{{myList.list1[i]}}</div>
</div>
</virtual-scroller>
</div>
<div class="virtual-scroller-column">
<virtual-scroller #scroll2 [id]="myGroupId" class="virtual-scroller">
<div class='container' [dragula]="myGroupId" [(dragulaModel)]="myList.list2">
<div class="virtual-scroller-element" *ngFor="let card of myList.list2; let i = index ">{{myList.list2[i]}}</div>
</div>
</virtual-scroller>
</div>
<div class="virtual-scroller-column">
<virtual-scroller #scroll3 [id]="myGroupId" [items]="myList.list3" class="virtual-scroller">
<div class='container' [dragula]="myGroupId" [(dragulaModel)]="myList.list3">
<div class="virtual-scroller-element" *ngFor="let card of myList.list3; let i = index ">{{myList.list3[i]}}</div>
</div>
</virtual-scroller>
</div>
</div>
来源:https://stackoverflow.com/questions/55016938/ng2-dragula-with-a-virtual-scroll