ng2-dragula с виртуальной прокруткой - PullRequest
Новая
       36

ng2-dragula с виртуальной прокруткой

1 голос
/ 06 марта 2019

Я пытаюсь реализовать 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" и элементами для перетаскивания не должно быть HTML.

Но почти любая виртуальная библиотека скроллера, включая эту, создает элемент внутри div. это автоматически генерируется пакетом. И поэтому мой полный div будет фронтоном сопротивления.

Хотелось бы узнать, есть ли у вас какие-нибудь настройки, чтобы это работало?

1 Ответ

1 голос
/ 06 марта 2019

Я не использовал его раньше, но, похоже, это помогает (я не знаю насчет визуальных эффектов, думаю, его можно настроить, но функционально он работает). пожалуйста, проверьте: 

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