要使Angular CDK Drag在拖动时能够滚动容器,您可以使用以下解决方法:
CdkDrag
和ScrollingModule
:import { CdkDrag } from '@angular/cdk/drag-drop';
import { ScrollingModule } from '@angular/cdk/scrolling';
cdkDropList
指令添加到容器元素上,并设置autoScroll
选项为true
:
CdkDrag
指令添加cdkDragRootElement
属性,并将其设置为触发滚动的元素。例如,如果您希望在拖动时滚动容器本身,您可以将其设置为您的容器元素:export class YourComponent {
@ViewChild(CdkDrag) dragElement: CdkDrag;
constructor() { }
onDragStart(event: CdkDragStart) {
event.source._dragRef.scrollableElement = this.dragElement.element.nativeElement;
}
}
onDragStart
),将scrollableElement
属性设置为希望在拖动时滚动的元素。这将确保在拖动过程中,容器会自动滚动以显示拖动元素。请注意,这只是一种解决方法,具体取决于您的应用程序的要求和设计。根据您的实际情况,您可能需要进行适当的调整和自定义。