phphe / vue-draggable-nested-tree

Vue2 draggable tree component
https://hetree.phphe.com/
MIT License
344 stars 62 forks source link

Can i drag and drop only same hierarchy? #59

Closed eretica closed 5 years ago

phphe commented 5 years ago

reference example MaxLevel. set droppable for every node in drag event.

eretica commented 5 years ago

thanks! Implemented with reference to the above

 ondrag(node) {
    // root droppable only first node
    let rootDroppabel = (1 === node._vm.level);
    const rootNode = node._vm.store.rootData;
    this.$set(rootNode, 'droppable', rootDroppabel);

    const {maxLevel} = this;
    let nodeLevels = 1;
    th.depthFirstSearch(node, (childNode) => {
        if (childNode._vm.level > nodeLevels) {
            nodeLevels = childNode._vm.level
        }
    });
    nodeLevels = nodeLevels - node._vm.level + 1;
    const childNodeMaxLevel = maxLevel - nodeLevels;
    th.depthFirstSearch(this.data, (childNode) => {
        if (childNode === node) {
            return 'skip children'
        }
        if (!childNode._vm) {
            console.log(childNode);
        }

        // same hierarchy
        let isOverLevel = childNode._vm.level <= childNodeMaxLevel;
        if (!isOverLevel) {
            this.$set(childNode, 'droppable', false);
            return;
        }

        // Possible to drop only in same parents
        if (childNode._vm._uid !== node.parent._vm._uid) {
            this.$set(childNode, 'droppable', false);
            return;
        }

        this.$set(childNode, 'droppable', true)
    })
},