QDraggableTree

QDraggableTree is a Quasar App Extension. It is a component that displays hierarchical data with drag and drop ability.

Install

To add this App Extension to your Quasar application, run the following (in your Quasar app folder):

quasar ext add quasarmasterdraggabletree

After version 0.0.4, it is mandatory to have children object (Ex. children: []) even if the item has no children present.

Uninstall

To remove this App Extension from your Quasar application, run the following (in your Quasar app folder):

quasar ext remove quasarmasterdraggabletree

Defining the data

    [
        {
            id: 1,
            label: 'Satisfied customers',
            children: [
                {
                    id: 2,
                    label: 'Good food',
                    children: [
                        {
                            id: 3,
                            label: 'Quality ingredients',
                            children: [],
                        },
                        {
                            id: 4,
                            label: 'Good recipe',
                            children: [],
                        }
                    ]
                },
                {
                    id: 5,
                    label: 'Good service',
                    children: [
                        {id: 6, label: 'Prompt attention', children: [],},
                        {id: 7, label: 'Professional waiter', children: [],},
                    ]
                },
                {
                    id: 8,
                    label: 'Pleasant surroundings',
                    children: [
                        {id: 9, label: 'Happy atmosphere', children: [],},
                        {id: 10, label: 'Good table presentation', children: [],},
                        {id: 11, label: 'Pleasing decor', children: [],}
                    ]
                }
            ]
        }
    ]