1

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 ?

Crocsx
  • 2,067
  • 1
  • 18
  • 35

1 Answers1

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>
jcuypers
  • 1,673
  • 2
  • 13
  • 19
  • I did a different approach, https://stackblitz.com/edit/angular-zpxjsk and we kind of manage to get the same result. Still not perfect tho, the placeholder div is added at the bottom and not where it should be, and we also get sourceModel undefined. Thanks for the time. I asked help on their GitHub and will keep investigate. – Crocsx Mar 06 '19 at 07:51