要在Angular Material中实现拖放和滚动,可以使用cdk中的DragDrop模块和Scolling模块。下面是一个示例解决方法:
npm install @angular/cdk @angular/material
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ScrollingModule } from '@angular/cdk/scrolling';
@NgModule({
imports: [
// ...
DragDropModule,
ScrollingModule
],
// ...
})
export class AppModule { }
{{ item }}
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@Component({
// ...
})
export class MyComponent {
items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
onDrop(event: CdkDragDrop) {
if (event.previousContainer === event.container) {
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
}
}
在这个示例中,我们使用了cdkDropList指令来标记可拖放的容器,并使用cdkDrag指令来标记可拖放的元素。cdkDropListDropped事件处理程序将在拖放完成时触发,我们可以根据需要在其中处理拖放的逻辑。
另外,我们也使用了cdkScrollable指令来使容器可滚动。这样,当我们将拖放的元素拖到容器的边缘时,容器将自动滚动以适应拖放的位置。
这就是一个基本的Angular Material拖放和滚动的解决方法。你可以根据自己的需求进行调整和扩展。