Блог

Главная - Вопросы по программированию - Перетаскивание мешает прокрутке в Angular 7 CDK

Перетаскивание мешает прокрутке в Angular 7 CDK

#android #ios #angular #ionic-framework #electron

#Android #iOS #angular #ionic-framework #electron

Вопрос:

У меня есть приложение Ionic, которое встроено в angular, и, следовательно, в нем есть перетаскивание angular cdk для изменения порядка списка. Перетаскивание отлично работает, однако на мобильных устройствах я вообще не могу прокручивать. Я считаю, что жесты перетаскивания поглощают мои жесты прокрутки.

Я попытался установить для cdkDragStartDelay значение 5000 (миллисекунды):

 <cu-task-row
  cdkDrag
  [cdkDragData]="task"
  [cdkDragStartDelay]="5000"

Это задерживает перетаскивание, но я все еще не могу прокручивать.

Возможно ли прокручивать и реализовывать перетаскивание в мобильных устройствах с использованием Angular cdk?

Комментарии:

1. У меня такая же проблема, вы нашли решение? Спасибо

2. нет, к сожалению, я этого не сделал. жаль, что cdkDrag не подходит для мобильных устройств

3. Я предлагаю вам использовать пользовательский дескриптор перетаскивания для элементов списка.

4. Кажется, есть проблема с задержкой перетаскивания и прокруткой: github.com/angular/components/issues/16614

Ответ №1:

Единственное решение (если вы остаетесь с cdk) заключается в том, что если вы перейдете на последнюю версию Angular Material (^ 8.1.0).

Cdk DragDrop (Material) 7 и ранняя версия 8 блокируют прокрутку при перетаскивании (https://github.com/angular/components/issues/14273#issuecomment-442201350 ). Однако это уже решено с помощью функции автоматической прокрутки в ^ 8.1.0 (https://github.com/angular/components/issues/13588 ).

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

Если вы создадите онлайн-пример, я мог бы попытаться помочь вам больше.

Ответ №2:

Если вы запускаете прокрутку из-за пределов элементов перетаскивания, и это все еще не работает, вам следует проверить CSS. В частности, в таких свойствах, как положение и отображение. При неправильной настройке они могут привести к некоторым неожиданным результатам при прокрутке

Ответ №3:

Если вы хотите, чтобы прокрутка выполнялась вертикально, вы можете сделать это, используя angular material версии 8. Эта функция добавлена в angular версии 8.

также вы можете столкнуться с проблемой по горизонтали, я решил ее путем внедрения документа и использования идентификатора контейнера

 import { DOCUMENT } from '@angular/common';
import {Inject } from '@angular/core';

constructor(@Inject(DOCUMENT) private document: Document) {}

onDragMoved(event) {
    if (event.delta.x === 1) {
        this.document.getElementById('container').scrollLeft  = 10;
    } else {
        this.document.getElementById('container').scrollLeft -= 10;
    }
}

Ответ №4:

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

https://material.angular.io/cdk/drag-drop/overview