我正在使用primeng树组件,并希望通过节点实现复制和移动功能(通过利用拖放功能)。实际上内置"移动"工作正常,但为了实现"复制"我想知道是否按下了ctrl按钮,如果是,则在两个地方(上一个和新的)创建一个相同的节点。我想抓住onDragStart和onDragEnd事件,但它似乎没有用。
我尝试了以下代码:https://github.com/primefaces/primeng/issues/683
以下是组件:
import { Component, OnInit } from '@angular/core';
import { TreeModule,TreeNode,ContextMenuModule,MenuItem, TreeDragDropService} from 'primeng/primeng';
import { NodeService } from './prime-tree.service'
@Component({
selector: 'prime-tree',
styleUrls: ['./prime-tree.style.scss'],
template: `
<p-tree
[value]="files"
selectionMode="single"
[selection]="selection"
draggableNodes="true"
droppableNodes="true"
>
<template let-node pTemplate type="default">
<span
pDraggable="treedragdrop"
pDroppable="treedragdrop"
(onDragStart)="onDragStart($event, node)"
(onDragEnd)="onDragEnd($event, node)"
(onDrop)="onDrop($event, node)"
(onDragEnter)="onDragEnter($event, node)"
(onDragLeave)="onDragLeave($event, node)"
>
{{node.label}}
</span>
<input [(ngModel)]="node.label" type="text" style="width:100%">
</template>
</p-tree>
`,
//templateUrl: './prime-tree.template.html'
})
export class PrimeTreeComponent implements OnInit {
private cmItems: MenuItem[];
files: TreeNode[];
selection: TreeNode;
selectedFiles: TreeNode[];
// constructor() {}
constructor(private nodeService: NodeService) {}
ngOnInit() {
console.log('PrimeTreeComponent init')
this.nodeService.getFiles().then(files => this.files = files);
this.cmItems = [
{
label: 'File',
items: [{
label: 'New',
icon: 'fa-plus',
items: [
{label: 'Project'},
{label: 'Other'},
]
},
{label: 'Open'},
{label: 'Quit'}
]
},
{
label: 'Edit',
icon: 'fa-edit',
items: [
{label: 'Undo', icon: 'fa-mail-forward'},
{label: 'Redo', icon: 'fa-mail-reply'}
]
}
];
}
nodeSelect(event) {
//event.node = selected node
console.log("selected node", event, event.node, this.selectedFiles);
}
onDragStart(event, node) {
console.log("onDragStart", event ,node);
}
onDragEnd(event, node) {
console.log("onDragEnd", event ,node);
}
onDrop(event, node) {
console.log("onDrop", event ,node);
}
onDragEnter(event, node) {
console.log("onDragEnter", event ,node);
}
onDragLeave(event, node) {
console.log("onDragLeave", event ,node);
}
}
此模板也不起作用:
template: `<p-tree [value]="files"
selectionMode="multiple"
[(selection)]="selectedFiles"
(onNodeSelect)="nodeSelect($event)"
draggableNodes="true"
droppableNodes="true"
pDraggable="treedragdrop"
pDroppable="treedragdrop"
(onDragStart)="onDragStart($event, node)"
(onDragEnd)="onDragEnd($event, node)"
(onDrop)="onDrop($event, node)"
(onDragEnter)="onDragEnter($event, node)"
(onDragLeave)="onDragLeave($event, node)"
[contextMenu]="cm">
</p-tree>
<p-contextMenu #cm [model]="cmItems"></p-contextMenu>
`,