是的,Angular CDK拖放可以创建圆形边界。您可以使用CdkDragBoundary
指令来实现这一点。下面是一个示例代码:
CdkDragBoundary
指令应用于该元素,将其作为拖放的圆形边界。
拖放元素
.boundary {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
ViewChild
装饰器获取CdkDragBoundary
指令的引用,并在拖放开始时设置边界的范围。import { Component, ViewChild } from '@angular/core';
import { CdkDragBoundary } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-drag-drop-example',
templateUrl: './drag-drop-example.component.html',
styleUrls: ['./drag-drop-example.component.css']
})
export class DragDropExampleComponent {
@ViewChild('boundary') boundary: CdkDragBoundary;
onDragStarted(event) {
event.source._dragRef.setBoundary(this.boundary.getElementRef().nativeElement.getBoundingClientRect());
}
}
在上面的代码中,onDragStarted
方法在拖放开始时调用,将边界的范围设置为容器元素的边界框。
这样,您就可以使用Angular CDK拖放创建一个具有圆形边界的拖放区域了。