Drag&Drop 2.0

[amsik]

Now there is only basic functionality of DND includes events (dragging:start, dragging:finish)
Plans:

• Add states like draggable, dropable
• Callbacks for Drop/Drag start
• Expand non-leaf node (use option key)
• Multiple dragging
• Ability to Drag to others trees
• Add auto-scroll

[minedun6]

Now the real magic is going to happen.

[minedun6]

first issue:
Is it me or did the node:start-dragging event get called but not the node:stop-dragging event ?
The tree is stuck in a "dragging mode" event after I stoped dragging.

[amsik]

Can you share the code via jsfiddle? I will check it

[minedun6]

I'm sorry, but providing a fiddle is a bit tedious.
Here's the repo, could you please check it ?

Digital Assets rep link

[amsik]

I didn't clone your repo. But it should fix your issue.

[minedun6]

I didn't clone your repo. But it should fix your issue.

Much appreciated 👍

[amsik]

Much appreciated 👍

Does my fix helped? :)

[minedun6]

No sorry it didn't fix it.
It's still stuck on the node:dragging:start event.
I'll push latest changes onto the repo so you can check it out if you can.
Again, thx for taking so much time into helping me out.

[minedun6]

Since this issue might be features related, I though I might as well add some ideas (upcoming features) that could be added.

• Support for Async Search. (Maybe)
• Context Menu could be a great adding.
• Loading scope to override the existing loading bar.
• Disable Drag based on condition (Callback for drag/drop).

Maybe you or anybody else can fill in.

[amsik]

• Support for Async Search - what does it mean? Could you give me more details.
• Context Menu could be a great adding - yeah, it is an interesting feature.
• Disable Drag based on condition (Callback for drag/drop). - already has this point.
• Loading scope to override the existing loading bar - u can override the loading indicator via css

[minedun6]

• Support for Async search - How do you handle search when the children are not loaded, more a general question than the scope of this plugin.
• Loading scope to override the existing loading bar - I need to make this into a component instead of just an (image + css).

Sorry I'm asking so many questions, but I'm already integrating this plugin into our company's application and there is so much to know.
Again 👍 for the great work my friend.

[amsik]

• Support for Async search - nothing will be shown for now
• Loading scope to override the existing loading bar - I had thought about it. It will be nice to override a content, arrow and other parts of the node.

[minedun6]

• Support for Async search - nothing will be shown for now

Is there any kind of reason behind not showing or do you still have something not done yet ?

• Loading scope to override the existing loading bar - I had thought about it. It will be nice to override a content, arrow and other parts of the node.

I was gonna talk to you about the checkbox as well.

[amsik]

It will not work out all the problems through the configuration. The main idea is using several approaches to solve the problems:

• CSS.
• API
• Slots + data property exmpl

I did not find a task that I would not solve in these ways.

[molliapu]

Hi, amsik,

I have isse with dnd when I drop the node the node parent is null, but I need to get the parent node data for further databas operations.
Is there any way to get the parent in @node:dragging:finish="logDragFinish" event?

BR

[Luthys]

Hi how i can get the destination ?

[amsik]

Hi. You have 2 ways to get the destination:

• https://amsik.github.io/liquor-tree/#Drag-amp-Drop
• use dnd options:

const opts = {
  dnd: {
    onDragStart(node) {
      console.log('onDragStart', node.text)
    },
    onDragOn(targetNode, destinationNode) {
      console.log('onDragOn', targetNode.text, destinationNode.text)
      return true
    },
    onDragFinish(targetNode, destinationNode) {
      console.log('onDragFinish', targetNode.text, destinationNode.text)
      return true
    }
  }
}

[Luthys]

Thank you for your answers, but I wanted to know if we could have the whole destination.

Example: Parent1/Parent2/Child

[molliapu]

Hi, i just calculated the target node, and call afterDragfinish method where i finish all of the after drag tasks:

logDragFinish(node) {
let n = this.$refs.tree.find({data: { id: node.data.id}});
if (n && n[0]) {
this.afterDragFinish(n);
}
},

[amsik]

#47

[Kocal]

Sorry for asking, but is there a way to know the new target's position?

For example if I have two nodes A and B:

• If I move the node A after the node B, the target is A and the destination is B
• If I move back the node A before the node B, the target and destination are the same
• If I move back the node A inside the node B, the target and destination are the same

There is no way to know where the target node is :(

EDIT: Nevermind, I found by reading the source code that destinationPosition is send in during @node:dragging:finish event. I will send a PR (#150) to enhance the documentation about this :)

[amsik]

Hi! Destination node must be. Either target node added inside or beside. You have the 3th argument to detect the drop position.
They should not be the same. Could you show the example?

[Kocal]

Yes I used the 3rd argument to know the drop position, it helped me a lot.
I've opened #150 to document it, I'm sure it will help other people 🙂

[Alecyrus]

How to implement multiple dragging? Anyone help? please....

[Kocal]

What do you mean by multiple dragging?

[Alecyrus]

For example.... select several nodes, then drag all nodes to another position of tree.

[TerpeTubebaker]

Hey,

Thank you for all the work that went into the library.

I am currently facing the problem that i do want to use drag an drop, but there are certain limitations.
E.g. I display users in my application that contained in groups. Some privileges depend on these groups, so not everybody is allowed to drag the users wherever they want. The backend will of course not go through with the operation, but the treeview is displaying the user in the wrong position then.

Would it be possible to implement some sort of mechanism that decides if the dnd should be reversed depending on the outcome of a method? This method would in my case contain the call to the backend.

As the data prop is not reactive too, otherwise I'd have to reverse the decision manually by some stored state, and then rerender the whole tree.

[amsik]

Hey,

It possible.

• You can use onDragStart callback to prevent dragging (ex see https://github.com/amsik/liquor-tree/blob/master/demo/pages/dnd.html)
• To return to the node, you can use https://amsik.github.io/liquor-tree/#Tree-append-criteria-node

[TerpeTubebaker]

You are right, I had not seen that.
Thank you for the quick reply!

[p0wl90]

Hey everyone!
Correct me if I'm wrong but it is currently not possible to add items to the tree by dragging them into it, right? This would allow implementing stuff like the following:

Are you planning on adding something like this in the future?

[rebz]

Hey,

It possible.

• You can use onDragStart callback to prevent dragging (ex see https://github.com/amsik/liquor-tree/blob/master/demo/pages/dnd.html)
• To return to the node, you can use https://amsik.github.io/liquor-tree/#Tree-append-criteria-node

I can't get this to work. Whenever I use append I get an error of targetNode.append is not a function.

I found a way arround it... but now it always duplicates the node I pass into append instead of moving the node.

Your documentation even states that a new Node will be created but that is not what I want. I want to be able to "reverse/undo" the moved node back to its original position.

[rebz]

For anyone coming here wanting to "Move a node after an async operation", take a look at my code below.

onDragFinish(targetNode, destinationNode, dropPosition) {

  // make a copy of target node
  const clonedTargetNode = clone(targetNode)

  // setup your API payload
  const payload = {
    id: clonedTargetNode.data.id,
    parentID: destinationNode.data.id
  };

  // send payload off and wait for a response
  this.$store.dispatch('module/actionName', payload)
    .then(response => {
        // on success
        // remove the original node
        targetNode.remove()
        // add cloned node to destination
        destinationNode.append(clonedTargetNode)
    })
    .catch(error => {
      // on error, do nothing... maybe show an error
      console.info('error occurred', error)
    })

  // prevents LiquorTree from moving the item
  return false
},

[Maxooce]

Hi @amsik and first of all, thanks for your work !

I have a question about the feature "Ability to Drag to others tree". Are you still planning to develop it ?

Thanks for your reply !

[vikashrajgupta]

Hi @amsik I have an issue with the drag and drop feature.
And the issue is it's not giving the correct position after multiple drag and drop within the same tree.
For example - I have dragged a node let's say ABC multiple times up and down it gives the position something like drag-above and drag-below.
But after 4-5 iterations if I drag the same node ABC above it's giving me a position like drag-below just opposite to the action and whenever I drag down the node it's giving me position drag-above.
I have tried this in multiple trees and facing the same issue every time, can you please help me?
Thanks in advance

[egeersoz]

Dragging and dropping doesn't seem to change the data... does that need to be implemented manually?

I'm looking for two-way binding like shown here: https://sortablejs.github.io/Vue.Draggable/#/nested-example

(Notice how the list on the right also changes as you drag nodes around.)