带有虚拟滚动条的ng2-dragula [英] ng2-dragula with a virtual scroll

问题描述

我正在尝试实施 ngx-virtual-scroll 和 ng2-dragula
一起

I am trying to implement ngx-virtual-scroll and ng2-dragula together

这是我当前的 Stackblitz 更新： Stackblitz

问题如下：

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！