Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add hooks to tell the predicted position of the dragged node #31

Closed
adityapurwa opened this issue Sep 15, 2020 · 1 comment
Closed

Add hooks to tell the predicted position of the dragged node #31

adityapurwa opened this issue Sep 15, 2020 · 1 comment

Comments

@adityapurwa
Copy link

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
Copy link
Owner

phphe commented Sep 29, 2020

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');
    }
  }
}

@phphe phphe closed this as completed Oct 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants