Get the parent node when dragging:finish

[jago86]

I'm trying to get the "new parent" of a node after drop it in that new parent node. I'm using the event node:dragging:finish, like this:

<tree
    :data="treeData"
    :options="treeOptions"
    ....
    ....
    @node:dragging:finish="dragFinished"
    ref="tree"
>

And in the handler

dragFinished(node) {
    console.log(node.parent);
}

However, the console shows a null value. Is this an expected behavior or a bug?

It fact, if I want to get the new parent of the node I have been forced to do something like this:

dragFinished(node) {
    var theNode = this.$refs.tree.find({id: node.id})[0]
    console.log(theNode.parent);
}

And then with these little ugly code I can get the parent.

[thokkane]

Looking for the same functionality. @amsik have you had a chance to look?

[jcelmeta14]

Hey there, I am also looking for this functionality. In the docs there is this example (slightly edited):

logDragFinish(targetNode, destinationNode) {
  console.log(`Stop dragging: [TARGET]${destinationNode}`)
}

However, destinationNode is undefined.

[amsik]

Hi. I've changed a callbacks names. onDragFinish called every time. Not it calls only when user do mouseUp event. For instance:

dnd: {
  onDragStart(node) {
    return node.data.isNotDraggable !== true
  },
  onDragOn(targetNode, destinationNode) {
    console.log('onDragOn', targetNode.text, destinationNode.text)
    return destinationNode.data.isNotDroppable !== true
  },
  onDragFinish(targetNode, destinationNode) {
    console.log('onDragFinish', targetNode.text, destinationNode.text)
    return destinationNode.data.isNotDroppable !== true
  }
}

onDragOn calls every mouseMove event. U can prevent highlighting a target node in this method. But still it is possible to drop node if it is not forbidden in onDragFinish method.

[jcelmeta14]

Hello! Firstly, I would like to thank you for your fast reply :+1: however, I wanted to point out something. I have the following folder structure:

After dragging Second Folder out of First Folder, you would expect folder.parent to be null, however, this is not the case:

Maybe onDragFinish should be called on the next tick (once the tree has updated)? Since the tree renders corrently, I suppose it would work. I place the cosole.log inside a $nextTick I get null either dragging inside, outside a node.

Jurgen

P.S: Here's the code I am testing this with:

this.foldersOption.dnd.onDragFinish = (folder, destinationFolder) => {
      console.log('folder parent', folder.parent);
};

[jcelmeta14]

I was also thinking about destinationFolder, suppose I am dragging to a folder to be a sibling of some other folder, that is they are on the same level:

The destinationFolder will be set to the next element in the array, that is the Untitled folder. Maybe it is not appropriate to call it destinationNode, as it gives the feeling that this is the parent node.

P.S: pardon me for calling them folders, as I am dealing with a tree of folders :smile: