ng2-dragula虚拟卷轴

Question

我正在尝试同时实现ngx-virtual-scroll和ng2-dragula

这是我当前更新的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正常工作，在组声明[dragula]="myGroupId"和要拖动的项之间必须没有超文本标记语言。

但是几乎所有的虚拟滚动库，包括这一个，都会在div中创建项目。这是由包自动生成的。因此，我的整个div将是drag gable。

我想知道您是否有任何调整，使其工作？

Answer 1

我以前没有用过它，但这似乎起到了作用(我不知道视觉效果如何，我猜它可以调优，但在功能上它是有效的)。请测试：

<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>