ParadeTo / vue-tree-list

🌲A vue component for tree structure
http://paradeto.com/vue-tree-list/
MIT License
660 stars 127 forks source link

I just can't drag! #122

Closed DaanMoura closed 2 years ago

DaanMoura commented 2 years ago

Here is a record. I'm trying to drag, but nothing happens Screen Recording 2022-02-10 at 12 14 57

The code I used is from the example, only adapted for Composition API

export default defineComponent({
    name: 'TreeView',
    components: {
        VueTreeList
    },
    setup () {
        const newTree = ref({})
        const data = ref(new Tree([
            {
                name: 'Node 1',
                id: 1,
                pid: 0,
                addTreeNodeDisabled: true,
                addLeafNodeDisabled: true,
                editNodeDisabled: true,
                delNodeDisabled: true,
                children: [
                    {
                        name: 'Node 1-2',
                        id: 2,
                        isLeaf: true,
                        pid: 1
                    }
                ]
            },
            {
                name: 'Node 2',
                id: 3,
                pid: 0,
                disabled: true
            },
            {
                name: 'Node 3',
                id: 4,
                pid: 0
            }
        ]))

        function onDel (node) {
            console.log('del', node)
            node.remove()
        }

        function onChangeName (params) {
            console.log('change name', params)
        }

        function onAddNode (params) {
            console.log('add node', params)
        }

        function onClick (params) {
            console.log('click', params)
        }

        function onDrag (params) {
            console.log('drag', params)
        }

        function addNode () {
            const node = new TreeNode({ name: 'new node', isLeaf: false })
            if (!data.value.children) {
                data.value.children = []
            }
            data.value.addChildren(node)
        }

        function getNewTree () {
            function _dfs (oldNode) {
                const newNode = {}
                for (const k in oldNode) {
                    if (k !== 'children' && k !== 'parent') {
                        newNode[k] = oldNode[k]
                    }
                }

                if (oldNode.children && oldNode.children.length) {
                    newNode.children = []
                    for (let i = 0, len = oldNode.children.length; i < len; i++) {
                        newNode.children.push(_dfs(oldNode.children[i]))
                    }
                }

                return newNode
            }

            newTree.value = _dfs(data.value)
        }

        return {
            data,
            newTree,
            onDel,
            onChangeName,
            onAddNode,
            onClick,
            onDrag,
            addNode,
            getNewTree
        }
    }
})
DaanMoura commented 2 years ago

I reinstalled all the packages of the project and it started working.