可以使用CDK中提供的CdkDragScrollAxis
和CdkDropList
指令来解决这个问题。
首先,使用CdkDragScrollAxis
指令来指定可滚动的轴。例如,如果您的容器只在垂直方向上滚动,则可以将CdkDragScrollAxis
指令应用于该容器,并将axis
属性设置为y
,如下所示:
这将确保在拖拽时,容器只会在垂直方向上滚动。
其次,可以使用CdkDropList
指令来指定有效的放置区域。可以将cdkDropListDisabled
属性设置为一个函数,该函数接受一个CdkDrag
对象,并返回一个布尔值,指示该拖动是否可以被放置。例如,下面的示例将拖放列表限制为只有在容器内放置时才会激活:
import { CdkDrag } from '@angular/cdk/drag-drop';
shouldDisableDropList = (drag: CdkDrag) => {
const { top, left } = drag.getFreeDragPosition();
const { width, height } = drag.getRootElementBoundingRect();
// 如果拖动离开了容器边界,则禁用放置列表。
if (top < 0 || left < 0 || top + height > this.containerHeight || left + width > this.containerWidth) {
return true;
}
// 如果拖动在容器内,则