How to know value from targetPath when ondragend

[mfaridzia]

Hello, how to find out the value in targetPath on ondragend event?

now I just get value from my startPath in dragNode object, but still confused to get value from its targetPath.

For example, I have data structures like this:
[{ id: 1, name: "test1" }, { id: 2, name: "test2" }]

when I move position id 2 to id 1, then I only get data id 2(startPath) in dragNode object but how to get data targetPath(id 1) too?

Thanks.

[phphe]

ondragend(store) {
  console.log(store.startPath);
  console.log(store.targetPath);
  console.log(store.targetPath.parent[store.targetPath.index]) // In ondragend hook, data is not modified yet, so it should be node 1
  // targetPath structure
  /*
  {
      tree: Draggable;
      parent?: Node;
      index: number;
  }
  */
}

[mfaridzia]

Thanks for the response @phphe , I have tried it but it gets undefined when dragging the item? is there something wrong?

[mfaridzia]

Actually I want to get value data before updating and after updating, to be used later to compare the data and change the order data.

Now I try with this code, but the condition is always false( this is always false: if (item.ChapterPlaylistId !== startItems[index].ChapterPlaylistId), so the input array variable is always empty, any ideas how to do it right?

updatePlaylistOrder(tree, store) {
      const startPath = store.startPath;
      const targetTree = store.targetTree.value;
      const startTree = store.startTree.value;
      const startItems = startTree[startPath[0]].children[startPath[1]].children;
      const targetItems = targetTree[startPath[0]].children[startPath[1]].children;
 
      const input = [];
      targetItems.forEach((item, index) => {
        if (item.ChapterPlaylistId !== startItems[index].ChapterPlaylistId) { // this is always false because the data is same
          if (!targetItems[index - 1]) {
            input.push({
              ChapterPlaylistOder: 0,
              ClassPlaylistId: item.course_playlists[0].content_playlist.ClassPlaylistId,
              CoursePlaylistId: item.course_playlists[0].content_playlist.CoursePlaylistId,
              ChapterPlaylistId: item.course_playlists[0].content_playlist.ChapterPlaylistId,
            });
          } else {
             input.push({
              ChapterPlaylistOder: targetItems[index-1].course_playlists[0].content_playlist.ChapterPlaylistOrder + 1,
              ClassPlaylistId: item.course_playlists[0].content_playlist.ClassPlaylistId,
              CoursePlaylistId: item.course_playlists[0].content_playlist.CoursePlaylistId,
              ChapterPlaylistId: item.course_playlists[0].content_playlist.ChapterPlaylistId,
            });
          }
        }
      });

      console.log("input", input); // empty
}

[phphe]

const startItems = startTree[startPath[0]].children[startPath[1]].children; startPath is not array, it is object.

This may help, when ondragend hook be called, data is still not changed. in event drop, the data is changed.

[mfaridzia]

thanks for the response, from the console.log code below isn't startPath an array?

I also tried using the drop event, but the data from targetTree and startTree are still the same, so the input array is empty.

[phphe]

Sorry, I made a mistake.

The targetPath still point to the original node. I think you want to get the node after the moved node. Check follow code.

<Tree @drop="ondrop" />

ondrop(store) {
  let t = store.targetPath.slice(0)
  t[t.length - 1]++
  console.log(store.targetTree.getNodeByPath(t));
}

The code will throw error if the next node does not exist.

[phphe]

Sorry, I made a mistake.

The targetPath still point to the original node. I think you want to get the node after the moved node. Check follow code.

<Tree @drop="ondrop" />

ondrop(store) {
  let t = store.targetPath.slice(0)
  t[t.length - 1]++
  console.log(store.targetTree.getNodeByPath(t));
}

The code will throw error if the next node does not exist.

The issue has been fixed since he-tree-vue@3.1.0. This example is deprecated.