Угловой 8 и угловой материал: перетаскивание прокрутки с помощью элемента CdkDropList

Я пытаюсь обеспечить прокрутку при перетаскивании элемента cdkDropList. На данный момент страница не может прокручиваться без использования колеса мыши для прокрутки. Я надеялся, что смогу просто прокручивать страницу, перетаскивая элемент списка. После поиска в Google кажется, что это было возможно только несколько месяцев назад ?!

Я нашел следующую фиксацию в репозитории материалов angular: https://github.com/crisbeto/material2/commit/b4be85f6716a2d1a432ef7109aa06e7255324222

но не нашел никакой документации на сайте angular material. Мне было любопытно, реализовал ли кто-нибудь какую-либо автоматическую прокрутку перетаскивания для элемента CdkDropList с Angular Material с момента его выпуска. Я новичок в angular. Я пробовал добавить тег cdkScrollable в div, но мне удалось заставить работать функцию автоматической прокрутки при перетаскивании любого из элементов в списке.

Мысли / советы?


angular angular8 drag-and-drop angular-material angular-cdk
person dxlachx    schedule 12.12.2019    source источник
comment
Вы можете попробовать со списками событий, например, когда пользователь перетаскивает в нижнюю часть прокручиваемого списка, затем прокручивает список вниз, если пользователь перетаскивает элемент в верхнюю часть прокручиваемого списка, а затем прокручивает вверх.   -  person Hitech Hitesh    schedule 12.12.2019
comment
Я предполагаю, что он должен автоматически работать для прокрутки. Я предполагаю, что есть какое-то ограничение с макетами / контейнерами с фиксированной высотой / шириной, я считаю, что это то, что я обнаружил.   -  person dxlachx    schedule 15.12.2019

Ответы (2)


arrow_upward
5
arrow_downward

Начиная с версии 9.1.0, автоматическая прокрутка поддерживается установкой директивы cdkScrollable для родительского элемента, который должен прокручиваться.

Итак, для v9.1.0 и выше должен работать следующий код:

<div style="height: 500px; overflow-y: auto" cdkScrollable>
  <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
  </div>
</div>

Демонстрация Stackblitz:

https://stackblitz.com/edit/angular-swaqkk-njehwg ( использует Angular CDK v10.0.1)

Кроме того, я опубликовал более полный ответ, который включает больше примеров, а также решения для Angular8, в следующей теме: Angular CDK - проблема с прокруткой и перетаскиванием элемента внутри вложенного прокручиваемого div

person andreivictor    schedule 05.11.2020
comment
для работы требуется фиксированная высота в пикселях или%. - person Mauricio Gracia Gutierrez; 05.07.2021

arrow_upward
1
arrow_downward

Примечание. cdkScrollable не делает ничего прокручиваемым волшебным образом. Вы должны создать подписку и действие для обработки события.

Что касается cdkDropList, он будет прокручиваться, если дочерний элемент содержит * ngFor с элементами, которые он должен перебирать. Изменен ответ от @andreivictor, чтобы доказать это: https://stackblitz.com/edit/angular-swaqkk-4iaqwc?File=src%2Fapp%2Fcdk-drag-drop-sorting-example.html

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let movie of movies" >
    <ng-container *ngTemplateOutlet="Tmpl2; context:{ movieT: movie }">
    </ng-container>
</div>
<ng-template #Tmpl2 let-movieT="movieT">
    <div>
                <div class="example-box" cdkDrag>{{movieT}}</div>
    </div>
</ng-template>

Переместите div ngFor в шаблон и переименуйте {{movieT}} в {{movie}}, и вы увидите остановки прокрутки. Это связано с тем, что директива cdkDropList больше не может получить доступ к элементам внутри другого компонента. Я не знаю, как справиться с этим сценарием, но если вы можете избежать шаблонов, я полагаю, что прокрутка должна работать должным образом. Это также проблема, если вы создаете списки вложенности. Мне не удалось заставить работать атрибут cdkDropListGroup , хотя добавление атрибута id и использование атрибута массива cdkDropListConnectedTo (находится по той же ссылке) работает хорошо.

person Had To Ask    schedule 09.06.2021
comment
он заставляет его прокручиваться, пока элемент с cdkScrollable имеет фиксированную высоту. - person Mauricio Gracia Gutierrez; 05.07.2021
comment
Вы можете это доказать? Я не обнаружил корреляции при тестировании и удалении cdkScrollable или стилей из исходного ответа stackblitz не влияет на прокрутку. - person Had To Ask; 07.07.2021
comment
Когда я реализовал это, обработчики событий прокрутки не используются только cdkScrollable - ibb.co/QF47N79 - как и другой ответ говорит. Это не сработало, пока я не установил высоту контейнера, в котором мне нужны свитки. - person Mauricio Gracia Gutierrez; 07.07.2021