Using getNodeParentByPath for a dragged node

[rubinovk]

Hi,

I am working with a Draggable plugin.
How can I access the parent of the dragged node?
I see getNodeParentByPath method, but how do I call it?

<template>
  <Tree
    :value="categoryTreeData"
    draggable
    droppable @drop="handleTreeChange"
  >
    <span slot-scope="{node, index, path, tree}">
      <template v-if="!node.isDragPlaceHolder">
        <span
          v-if="node.children && node.children.length"
          @click="slot.store.toggleOpen(node)"
        >
          <v-icon v-if="node.open" small class="mr-1">mdi-minus-box-outline</v-icon>
          <v-icon v-if="!node.open" small class="mr-1">mdi-plus-box-outline</v-icon>
        </span>
        <span :class="{ 'draggable-node--drop-disabled': node.droppable === false }">{{ node.text }}</span>
      </template>
    </span>
  </Tree>
</template>
<script>
import { Tree,  Draggable } from "he-tree-vue"
import 'he-tree-vue/dist/he-tree-vue.css'
import sortBy from 'lodash/sortBy'

export default {
  name: 'CategoryTreeSort',
  components: {Tree: Tree.mixPlugins([Draggable])},
  methods: {
    async handleTreeChange (store) {
       const {dragNode} = store
       // how to get the parent of dragNode?
    }
....

Thank you

[phphe]

If dragNode not be dropped, its path is store.startPath, else store.targetPath.

getNodeParentByPath(store.startPath)
getNodeParentByPath(store.targetPath)

But in current version 1.*.*, in drop event, the dragNode is not be dropped. It will be fixed in next version 2.*.*. So if you want get parent node after dropped:

<Tree ref="tree" @change="handleTreeChange">

handleTreeChange () {
    const store = this.$refs.tree.treesStore.store
    const {dragNode} = store
    // get the parent of dragNode
    getNodeParentByPath(store.startPath)
    getNodeParentByPath(store.targetPath)
}

[phphe]

Now v2 pulished. You can use

getNodeParentByPath(store.startPath)
getNodeParentByPath(store.targetPath)

[rubinovk]

Thanks! I will use it now

[bajki]

I get this error

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'store' of undefined"

[phphe]

@bajki could you show more?

[bajki]

https://codesandbox.io/s/quirky-diffie-ssrrm

Could you update this to show us how it works?

Because i need parent_id to update sql

[phphe]

@bajki treesStore, not treeStore

[AlexKonovalik]

Hi!
The getNodeParentByPath method returns an incorrect node
It returns the next one after the correct node if I move from top to bottom

[phphe]

try both

getNodeParentByPath(store.startPath)
getNodeParentByPath(store.targetPath)

If dragNode not be dropped, its path is store.startPath, else store.targetPath.

[AlexKonovalik]

I've tried both variants But the path on drop is incorrect because I move the node from top to bottom
For example, I move the node with startPath [0, 7]
On drop it has targetPath [0, 8, 0], but it should be [0, 7, 0] because I moved one node from top

[phphe]

@AlexKonovalik Could you create a reproduce on codepen or other sites?

[AlexKonovalik]

@phphe Shure!
There is a link
https://codesandbox.io/s/pensive-wilbur-rbwr5f?file=/src/App.vue

IMHO, the problem is not even in getNodeParentByPath method, but in the targetPath

STR:

1. Move node 1-7 to node 1-8 (before node 1-8-1)
2. Check console logs

Actual result:

1. targetPath is [0, 7, 0]
2. Parent node is 1-9

Expected result:

1. targetPath should be [0, 6, 0]
2. Parent node should be 1-8

[phphe]

@AlexKonovalik use he-tree-vue@3.1.0

[AlexKonovalik]

@phphe Thanks! It works correctly in this version