primeng tree catch drag & drop events

Viewed 4477

I am working with primeng tree component and would like to implement copy&move functionality (by utilizing drag & drop) with a node. Actually built-in "move" works fine, but in order to implement "copy" I would like to know if ctrl button is pressed and if it is, then create a the same node in both places (previous and new). I thought to catch onDragStart and onDragEnd events, but it doesn't seem to work.

I tried code from: https://github.com/primefaces/primeng/issues/683

Here is the component:

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);
    }

}

This template also didn't work:

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 Answers
Related