Update parent_id and path after dragging and dropping element

[mahoone]

Hi,

How can I update values in parent_id and path after drag and drop event is completed?

So for example I have the below structure:

As you can see the 3rd element with id of 363 has wrong parentId of 54 (should be 55) and path should be 1 instead of 2 as it is a first element in that array.

Any idea how can I update those values dynamically so I can then save them back into mysql?

Many thanks for your help!

[phphe]

do that in event 'drop'. store.dragNode is the dragged node.

ondrop(store){
  let parent = tree.getNodeParentByPath(store.targetPath)
  store.dragNode.parentId = parent .id
  store.dragNode.path = parent.children.indexOf(store.dragNode)
}

[phphe]

<Tree ref="tree" @drop="ondrop">
  ...
</Tree>

then access tree by this.$refs.tree
store is the first argument of ondrop

[mahoone]

Thank you!
I'm doing something wrong because I keep getting 'undefined' errors. Sorry if it's too obvious!

[phphe]

change @drop="ondrop(store)" to @drop="ondrop"

[mahoone]

Now I'm getting: Cannot read property 'targetPath' of undefined". Am I accessing store correctly in Methods?

ondrop() {
      var tree = this.$refs.tree;
      var store = this.store;
      let parent = tree.getNodeParentByPath(store.targetPath);
      store.dragNode.parentId = parent.id;
      store.dragNode.path = parent.children.indexOf(store.dragNode);
      console.log("logged");
      // console.log(this.test);

      // this.currentNode = node;

      // if (this.currentNode.parentId != "0") {
      //   console.log("child");
      // } else {
      //   console.log("parent");
      // }
    },

[phphe]

change ondrop() to ondrop(store)

@drop="ondrop" is in template
ondrop(store) is in js

[mahoone]

Thank you. It is updating now with the correct parentId.

Do you know how can I resolve the path issue?

My current 'path system' is as follows:

[
  {
    "id": 54,
    "text": "Administracja",
    "parentId": 0,
    "path": 19,
    "active": 1,
    "children": [
      {
        "id": 55,
        "text": "Struktura menu systemu",
        "parentId": 54,
        "path": 1,
        "active": 1
      },
      {
        "id": 363,
        "text": "Zarządzanie profilami dostępu",
        "parentId": 54,
        "path": 2,
        "active": 1
      },
      {
        "id": 497,
        "text": "Zarządzanie użytkownikami",
        "parentId": 54,
        "path": 3,
        "active": 1,
        "children": [
          {
            "id": 503,
            "text": "Dodawanie nowego pracownika",
            "parentId": 497,
            "path": 1,
            "active": 1
          },
          {
            "id": 504,
            "text": "Modyfikacja danych pracownika",
            "parentId": 497,
            "path": 2,
            "active": 1
          },

Can I implement path system that the nodes are using which is 0 -> 0,0 -> 0,0,0 and so on into my application instead of using my 'path' system?

Many thanks!

[phphe]

ondrop(store){
  let parent = tree.getNodeParentByPath(store.targetPath)
  store.dragNode.parentId = parent .id
  store.dragNode.path = parent.children.indexOf(store.dragNode) + 1
}

[mahoone]

Thank you! It does work when dragging nodes up but when moved down it doesn't change anything:

Any idea how can I fix that?
So when I move a child down it should update it's path and other child's paths.

Thank you!

[phphe]

ondrop(store){
  let fromParent = tree.getNodeParentByPath(store.startPath)
  fromParent.children.forEach((child, index) => {
    child.path = index + 1
  })
  let targetParent = tree.getNodeParentByPath(store.targetPath)
  store.dragNode.parentId = targetParent.id
  targetParent.children.forEach((child, index) => {
    child.path = index + 1
  })
}

[mahoone]

Thank you so much for all your help. I think it's all good now!