以下是使用Angular 7和ngx-drag-drop库来实现使用父级可放置容器进行拖放的解决方法的代码示例:
npm install ngx-drag-drop --save
{{ item.name }}
import { Component } from '@angular/core';
@Component({
selector: 'app-parent-container',
templateUrl: './parent-container.component.html',
styleUrls: ['./parent-container.component.css']
})
export class ParentContainerComponent {
items = [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' }
];
onDragStart(event: DragEvent, item: any) {
event.dataTransfer.setData('text', JSON.stringify(item));
}
onDragOver(event: DragEvent) {
event.preventDefault();
}
onDrop(event: DragEvent) {
event.preventDefault();
const item = JSON.parse(event.dataTransfer.getData('text'));
// 在此处处理拖放操作
}
}
在上述代码中,我们通过在父级容器的div
元素上添加(drop)="onDrop($event)"
和(dragover)="onDragOver($event)"
事件来处理拖放操作。onDrop
方法将在项目放置到容器中时触发,并使用event.dataTransfer.getData('text')
获取拖放的项目数据。onDragOver
方法用于阻止默认的拖放行为。
通过运行上述代码,您将能够实现使用父级可放置容器进行拖放的功能。