问题描述
我正在尝试实施和
一起
I am trying to implement ngx-virtual-scroll and ng2-dragula together
这是我当前的更新:
问题如下:
<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>
要使Dragula正常工作,组声明之间必须没有HTML [dragula] = myGroupId
和要拖动的项目。
for Dragula to work, there must be no HTML in between the group declaration [dragula]="myGroupId"
and the items to drag.
但是几乎所有虚拟滚动器库(包括该库)都在div中创建了项。由软件包自动生成。因此,我的整个div将被拖动。
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 ?
推荐答案
我以前没有使用过,但这似乎可以解决问题(我不了解视觉效果,我猜测它可以调整,但在功能上可以正常工作)。请测试:
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>
这篇关于带有虚拟滚动条的ng2-dragula的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!