-
-
Notifications
You must be signed in to change notification settings - Fork 38
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 #12
Comments
So far infinite-tree can only drag an external element into the tree. Moving between nodes is not supported in current versions. Do you want to drag and drop nodes inside the tree? |
@cheton thanks for the quick response.. ye, I would like to move nodes inside the tree.. change parents, etc.. is it hard to implement this ? |
To make a node draggable, you can set the attribute If you want to drag a node and then insert it between two nodes, I'm not sure if it's easy to do, you might need to get current mouse position to determine if it is necessary to add/remove a ghost element above or below a node. |
Thanks for the advice, but creating a ghost element will require adding/removing 'node' (the ghost node) very fast from the tree right ? Also, how can I determine between which nodes should I put the ghost node ty |
Any new cool idea on this ? we really miss dnd :| |
Sorry for the delay. I have some ideas about how to add dnd support, but I'm pretty busy with my day work in this moment. I will make some updates once I'm free. |
Okay, thanks.. we are waiting, because we have no clue how to do it properly :) |
@chenton, could you please briefly explain the idea that you have (or some simplest idea) on how to implement this dnd feature into the tree? we did some workaround with "cut" and "paste", but this way is not really UX friendly :( |
I just updated the sample code in the examples directory, you can check out https://github.com/cheton/infinite-tree/blob/master/examples/default/index.js#L250-L329 for my initial work regarding drag and drop support. Note that the functionality is still not ready yet, just demonstrated a basic concept within the demo. let ghostElement = null;
let draggingX = 0;
let draggingY = 0; The To determine whether you're dragging from top to bottom or from bottom to top, you need a delta value to check whether the value is positive or negative, like so: const movementX = event.x - (Number(draggingX) || event.x);
const movementY = event.y - (Number(draggingY) || event.y); For the above I haven't finished this part due to my busy day work, you can continue to work if you're free. |
This works great.. I cant see anything missing, besides how to know where I am dropping the node (below, inside, above). Thank you for this! |
is this a viable way to find out where the node is being dropped? Edit: It seems that using getNodeFromPoint is okay if the drag is on some node, which means the node that is dragged, will be a child to that one, but what happens for above/below, to find the index or something Edit2: The hard part here is that the tree is not nested (but flat), so sometimes when I try to put the node as a last child, the insertBefore is actually the node after the parent of that node. Also, its impossible to put a node as a last node in the tree (the very last on the tree), because there isnt what to insertBefore on |
I think you might need to remember the
|
I am trying to make the tree drag/droppable but no matter what, it doesnt start working.. I have a custom rowRenderer which sets the treeNodeAttributes to true, the tree has droppable: true (I also tried setting it up as an object (I cant even get a console.log). I am using my own custom click handler (tree.on('click), but even if I dont, and comment it out, I still cant make it drag.. the example https://infinite-tree.js.org/examples.html#/classic works, but its still hard to start a drag process.. any idea how should I fix this issue ? dragging will be the main feature in the app..
thanks
Edit: this tree has a nice drag/drop functionalities, but the other features are not as good as this infinite tree (https://angular2-tree.readme.io/docs)
The text was updated successfully, but these errors were encountered: