带有虚拟滚动的 ng2-dragula答案

【问题标题】：ng2-dragula with a virtual scroll带有虚拟滚动的 ng2-dragula
【发布时间】：2019-03-06 06:31:54
【问题描述】：

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

问题如下：

<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" 和要拖动的项目之间必须没有 HTML。

但是几乎所有的虚拟滚动库，包括这个，都在 div 中创建项目。这是包自动生成的。因此，我的完整 div 将是拖动山墙。

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

【问题讨论】：

标签： angular drag-and-drop ng2-dragula virtualscroll

【解决方案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>

【讨论】：

我采用了不同的方法，stackblitz.com/edit/angular-zpxjsk，我们设法得到了相同的结果。仍然不完美，占位符 div 被添加到底部而不是它应该在的位置，我们也得到 sourceModel 未定义。谢谢你的时间。我在他们的 GitHub 上寻求帮助，并将继续调查。