phphe/he-tree-vue

Add hooks to tell the predicted position of the dragged node

adityapurwa opened this issue · 1 comments

I have a use case of changing a node style when certain position requirements are met, e.g. when hovering to a node, it will insert it as a child node, and while hovering below / above would insert it as an adjacent node, I need to detect this distinction to be able to change the styling.

By adding hooks, preferably on the placeholder position changes (e.g when a node is about to be added as a child node, I want to make the target parent node to have a different class).

I can create a pull request for the changes if required.

phphe commented

try 2.0.4-beta2 . I added event after-move

<Tree @after-move="afterMove"></Tree>
afterMove(store) {
  const closestBranch = store.oneMoveStore?.info?.closestBranch
  const {placeholder, targetTree} = store
  if (closestBranch && placeholder) {
    const closestNode = store.targetTree.getNodeByBranchEl(closestBranch)
    if (placeholder.parentElement.parentElement === closestBranch) {
      // is child
      console.log('child');
    } else if (placeholder.nextSibling === closestBranch) {
      // is previous sibling
      console.log('previous');
    } else if (placeholder.previousSibling === closestBranch) {
      // is next sibling
      console.log('next');
    }
  }
}