primeng tree catch drag&放弃事件

时间:2017-07-12 12:20:45

标签: angular tree primeng

我正在使用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>               
`,

0 个答案:

没有答案