How to create an empty folder in tree?

Webix JS
1

I want to drag a tree node into an empty folder, can i get a sample code to create an empty folder in tree view?

And another question is how to copy a node from a tree to another tree with drag?

2

You may try to customize “folder” template in type configuration of your tree. The template should return an icon with closed folder in two cases:

  • if an item has child items and it is not opened (“open” property is not set);

  • or if data item has some property that marks it as folder item (for example “type”: “folder”):

http://webix.com/snippet/b3a202a2

3

thanks, Maria.
but my confusion is not what the empty ‘folder’ node looks like. when i drag a node to the empty node typed ‘folder’, it can’t be a child node of the target folder node.
http://webix.com/snippet/60ecb423

4

Hi,

You may try to set onBeforeDragIn and onBeforeDrop event handlers:

http://webix.com/snippet/f38d8444

5

Thanks a lot, Maria! It’s worked.

The following effect is what i need:

http://webix.com/snippet/7b10dafd

The onBeforeDragIn event handler is not necessary, is it right?

I suggest that this feature can be used as the native feature of Webix, are you willing to consider of it in a future version? Then we can just set the ‘type’ and ‘icon’ properties of a tree node.

6

You are welcome!

The onBeforeDragIn event handler is not necessary, is it right?

Yes, it is not necessary. onBeforeDragIn in my demo allows to disable reordering items.

are you willing to consider of it in a future version? Then we can just set the ‘type’ and ‘icon’ properties of a tree node.

Most probably we won’t implement such a specific solution. Drag-n-Drop event handlers allows to apply different logic and solve many use-cases.