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

Drag&Drop 2.0 #55

Open
amsik opened this issue Oct 8, 2018 · 23 comments

Comments

@amsik
Copy link
Owner

commented Oct 8, 2018

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

@amsik amsik added the feature label Oct 8, 2018

@minedun6

This comment has been minimized.

Copy link

commented Oct 10, 2018

Now the real magic is going to happen.

@minedun6

This comment has been minimized.

Copy link

commented Oct 10, 2018

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.

image

@amsik

This comment has been minimized.

Copy link
Owner Author

commented Oct 10, 2018

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

@minedun6

This comment has been minimized.

Copy link

commented Oct 10, 2018

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 added a commit that referenced this issue Oct 13, 2018
@amsik

This comment has been minimized.

Copy link
Owner Author

commented Oct 13, 2018

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

@minedun6

This comment has been minimized.

Copy link

commented Oct 13, 2018

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

Much appreciated 👍

@amsik

This comment has been minimized.

Copy link
Owner Author

commented Oct 13, 2018

Much appreciated 👍

Does my fix helped? :)

@minedun6

This comment has been minimized.

Copy link

commented Oct 13, 2018

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

This comment has been minimized.

Copy link

commented Oct 13, 2018

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

This comment has been minimized.

Copy link
Owner Author

commented Oct 14, 2018

  • 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

This comment has been minimized.

Copy link

commented Oct 14, 2018

  • 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 added a commit that referenced this issue Oct 17, 2018
@amsik

This comment has been minimized.

Copy link
Owner Author

commented Oct 17, 2018

  • 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

This comment has been minimized.

Copy link

commented Oct 18, 2018

  • 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

This comment has been minimized.

Copy link
Owner Author

commented Oct 18, 2018

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

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

@molliapu

This comment has been minimized.

Copy link

commented Dec 23, 2018

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?

image

BR

@Luthys

This comment has been minimized.

Copy link

commented Feb 18, 2019

Hi how i can get the destination ?

@amsik

This comment has been minimized.

Copy link
Owner Author

commented Feb 18, 2019

Hi. You have 2 ways to get the destination:

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

This comment has been minimized.

Copy link

commented Feb 18, 2019

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

Example: Parent1/Parent2/Child

@molliapu

This comment has been minimized.

Copy link

commented Feb 18, 2019

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

This comment has been minimized.

Copy link
Owner Author

commented Feb 19, 2019

#47

@Kocal

This comment has been minimized.

Copy link
Contributor

commented Sep 10, 2019

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 :)

Kocal added a commit to Kocal/liquor-tree that referenced this issue Sep 10, 2019
@amsik

This comment has been minimized.

Copy link
Owner Author

commented Sep 10, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Sep 10, 2019

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 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.