你可以使用Angular CDK中的拖放功能来实现这个需求。首先,确保你已经安装了Angular CDK。
接下来,你可以创建一个DragDropModule
并将其导入到你的Angular模块中:
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
imports: [
// other imports
DragDropModule
],
// other configurations
})
export class AppModule { }
然后,在你的组件模板中,你可以使用cdkDropList
和cdkDrag
指令来创建拖放列表和可拖动的元素:
{{ item }}
{{ item }}
在组件类中,你可以根据需要实现onDrop
和onParentDrop
方法来处理拖放事件。在onParentDrop
方法中,你可以阻止原始下拉列表内的元素被拖动:
export class AppComponent {
items = ['Item 1', 'Item 2', 'Item 3'];
parentItems = ['Parent Item 1', 'Parent Item 2'];
onDrop(event: CdkDragDrop) {
// 处理原始下拉列表的拖放事件
// ...
}
onParentDrop(event: CdkDragDrop) {
// 阻止原始下拉列表元素的拖动
if (event.previousContainer === event.container) {
return;
}
// 处理父级下拉列表的拖放事件
// ...
}
}
通过这种方式,当你将元素拖动到父级下拉列表时,原始下拉列表中的元素不会被拖动。