Question

我有一个离子应用程序，该应用程序内置在angular中，因此可以拖放cdk来重新排列列表。拖放效果很好，但是在移动设备上，我根本无法滚动。我相信拖放手势会吃掉我的滚动手势。

我试图将cdkDragStartDelay设置为5000（毫秒）：

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

它确实延迟了拖动，但是我仍然无法滚动。

是否可以使用Angular cdk在移动设备中进行滚动和拖放操作？

Answer 1

我只是在平板电脑上看了看这些文档，然后尝试了滚动，只要我从拖放元素外部启动滚动即可。您是否尝试过在拖放元素周围添加一些空白区域以查看是否可以启动滚动？

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

Answer 2

如果您是从拖放元素外部开始滚动，但仍无法正常工作，则应检查CSS。特别是位置和显示等属性。如果设置不正确，它们可能会导致一些意外的滚动结果

Answer 3

唯一的解决方案（如果您留在cdk上）是如果您迁移到最新的Angular Material（^ 8.1.0）。

Cdk DragDrop（材料）7和8早期在拖动（https://github.com/angular/components/issues/14273#issuecomment-442201350）时会阻止滚动。但是，它已通过^ 8.1.0（https://github.com/angular/components/issues/13588）中的自动滚动功能解决。

因此，如果您向上迁移，可以尝试很好地使用简单容器（例如div）的新自动滚动功能，此外还启用了鼠标滚轮滚动功能，但我无法使其与物料表一起使用现在（没有太多调查）。

如果您创建在线示例，我可以尝试为您提供更多帮助。

Answer 4

如果要垂直滚动，可以通过使用角度材质版本8来实现，此功能已添加到角度版本8中。

您可能还会遇到水平问题，我通过注入文档并使用容器ID来解决了问题

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;
 } 
}

拖放干扰滚动Angular 7 CDK [ionic] [angular]

4 个答案: