Primeng: Feature Request: Add drag and drop support to the tree

[JakeSummers]

I am looking into how to add drag & drop support for the following two use cases:

1. Drag an element from a Tree and drop it into another element in the Tree.
2. Drag an element from a DataTabe and drop it into an element in the Tree.

At the moment PrimeNg has a Drag and Drop module that allows you to attach a draggable handle or droppable element onto an element. Unfortunately, I don't think I can use this with Trees because the treeNodes not exposed.

I think that I can make items in the DataTable draggable by using the templating functionality.

[JakeSummers]

I think that this may now be possible with PrimeNG 1.0.0-beta.13.

This release allows you to provide a template to render your nodes like this (using @ContentChildren):

<p-tree
    [value]="...">
    <div>some content</div> 
</p-tree>

I think that it may be possible to add a primeNg drag handle inside the ContentChildren. Haven't tried this yet, but I think this should work.

[cyberrranger]

hi jake,

i search a solution for "Drag an element from a Tree and drop it into another element in the Tree."

can you help?

[JakeSummers]

Hi @cyberrranger ,

Until this functionality is added into primeNg you can workaround by using something like this:

<p-tree
    [value]="displayedRootNodes"
    selectionMode="single"
    [selection]="selection"
>
    <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>
    </template>
</p-tree>

Jake

[cyberrranger]

thx, is working

[vas4oo]

Can you give the TypeScript too? My Drag and drop tree doesn't working...

[cyberrranger]

hi @vas4oo,

You have to implement the methods "onDrop, onDragStart, ..." yourself.

i work with a own rest api

onDragStart(event, node) {
        this.moveFile = node;
    }

    onDrop(event, target) {
        if (!this.moveFile || target.leaf) {
            return;
        }

        if (!this.moveFile.leaf) {
            // dont move root
            if (!this.moveFile.parent) {
                return;
            }

            if (target.parent == this.moveFile.uuid) {
                return;
            } else {
                // TODO path
            }

            this.adminService.moveGroup(this.moveFile.uuid, target.uuid);
        } else {
            this.adminService.moveItem(this.moveFile.uuid, this.moveFile.parent, target.uuid);
        }
    }

[vas4oo]

I have made them but still not working...

[cyberrranger]

You need to remove and add it in the tree itself

[bryanhaines]

@cyberrranger Hello, I'm hoping that you can help me get this to work in my project. I have (onDragStart)="onDragStart($event, node)" on my tree template and
onDragStart($event, node): void {
this.selectedEquipment = node;
console.log('onDragStart');
console.log(this.selectedEquipment);
}
in my component.
When I attempt to drag, the onDragStart never fires. Any ideas?

[cyberrranger]

@bryanhaines have you more example code?

my ts class

export class AdminHierarchy extends PARENT { moveFile: Hierarchy; onDragStart(event, node) { this.moveFile = node; } }
html show answer from @JakeSummers from 18 Oct 2016

[bryanhaines]

@cyberrranger Thanks for getting back to me. Here is my ts file:
export class BOMTreeComponent {
@Input()
set ID(ID: string) {
this.buildTree(ID);
}

public equipmentLibrary: any[];
public selectedEquipment = {};

constructor(private bomTreeService: BOMTreeService) {
    //this.designId = this.sessionCacheService.lastSelectedDesignId;
}

onSelect($event): void {
    if ($event.node.leaf === false) {
        return;
    }
    this.selectedEquipment = $event.node;
    console.log(this.selectedEquipment);
}

onDragStart($event, node): void {
    if (node.leaf === false) {
        return;
    }
    this.selectedEquipment = node;
    console.log('onDragStart');
    console.log(this.selectedEquipment);
}

onDragEnd($event, node): void {
    console.log('onDragEnd');
}

onDrop($event, node): void {
    console.log('onDrop');
}

onDragEnter($event, node): void {
    console.log('onDragEnter');
}

onDragLeave($event, node): void {
    console.log('onDragLeave');
}

}

Here is my template:

//

[cyberrranger]

you have no template

example:
<p-tree [value]="displayedRootNodes" selectionMode="single" [selection]="selection" > <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> </template> </p-tree>

[bryanhaines]

@cyberrranger I really appreciate your help and your reply. Believe me when I say that I do have a template, but for some reason it didn't show up when I copied and pasted my markup. I just tried again in this reply and the same thing happened. I placed // where the opening and closing tags for my template are in my example, above. Here is a screen shot:

[foxx9]

@bryanhaines Did you import the drag and drop module ?

import { DragDropModule } from 'primeng/components/dragdrop/dragdrop';

[bryanhaines]

@foxx9 Thank you for your reply. My import statement was "import { TreeModule, TreeNode, Draggable, Droppable } from 'primeng/primeng';". I added the import statement that you suggested, but still am not able to get the onDragStart event to fire. It seems as though no event will fire on my leaf nodes. I thought there was maybe some error in my template, but I can't see what it might be.

The error was in another part of the project. Thank you to both who offered help.

[cyberrranger]

8th of February is the planned date for 2.0-Final release. Then we’ll start working on the new features such as drag drop for tree, accessibility and rtl improvements, better touch support, live scrolling for datatable, spreadsheet component, captcha and server side rendering.

http://blog.primefaces.org/?p=4332

[cagataycivici]

Working on it for 4.0.RC1.

[cagataycivici]

Available for 4.0.RC1

[cagataycivici]

DragDrop between multiple trees are also supported in addition to dragdrop within the same tree. They can choose if nodes can be draggable and/or droppable. So for example one tree can only give nodes whereas one can decided only to receive nodes. Also with draggableScope and droppableScope, a tree can decide whether to accept nodes from a certain tree.

[mkseng]

Can anyone tell me about the version of primeng in package.json for tree drag-drop? I am getting an error while importing "TreeDragDropService". Currently, i am using "primeng": "^2.0.5" .

[lee-ji-eun]

I am getting an error while importing "TreeDragDropService". Currently, i am using "primeng": "^2.0.3" .

[ndmello]

Error importing 'TreeDragDropService'. Using primeng : 2.0.4

[FacePalmDev]

yeah it's missing when importing using NPM! Please Fix your NPM repository!

[cagataycivici]

You need to use PrimeNG 4 to get this feature, PrimeNG 2 only gets defect fixes, no new features as 4 does.

[Abhijeetkdev]

@cagataycivici please help , i need to drag a node and drop it on to the form based on which a event should fire and cloned node/dragged node object will have a name/id property out of it .....i don't need to drag and drop inside a tree and that's my requirement of the project ...attached is the screen shot of the project am building in angular 4.0 .

@JakeSummers @cyberrranger @bryanhaines

[wugang33]

@bryanhaines When I fellow your steps and got the same problem of you got that the onDragStart callback can not fired.
And finally I fix this problem by changing my App.module.ts and add DragDropModule in @NgModule(imports

@NgModule({ imports: [ TreeModule,DragDropModule,

[kishor-p]

@cagataycivici Is it possible to apply Drag and Drop functionality on HORIZONTAL TREE ??

[wassim21]

hello
I have an issue with drag and drop tree nodes. I copied the code from PrimeNG website, but drag and drop dosen't work.
Can you help me ?

[umangsavaliya]

@cagataycivici Is it possible to apply Drag and Drop functionality on HORIZONTAL TREE ??

https://stackblitz.com/edit/angular6-primeng-vtree