phphe/vue-draggable-nested-tree

Can i drag and drop only same hierarchy?

eretica opened this issue · 2 comments

Can i drag and drop only same hierarchy?
phphe commented

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

thanks!
Implemented with reference to the above

  • hierarchy control
  • root droppable only first node
  • Possible to drop only in same parents
 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)
    })
},