search

minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
520 stars 69 forks source link

Adding elements to the tree #103

Closed MrPrometheus closed 2 years ago

MrPrometheus commented 2 years ago

Hello, I tested the demo with adding elements, everything works great.

But this addition works on the button. The task is this: 1) There is a simple html tree without dnd 2) There is your tree. 3) I need to implement adding elements from the first tree to yours using dnd

The point of the idea is that there is no need to remove an element from the first tree. The first tree is like a set of features. When dragging a feature onto your tree, I need to figure out what level I'm at and add a new element based on the dragged feature.

How can this be implemented?

Is it possible to use the react-dnd library for the first tree, and when dragging onto your tree, I could understand to which level I dragged an element from the first list?

Or do I need to create a custom node and wrap it additionally in react-dnd?

minop1205 commented 2 years ago

@MrPrometheus Sorry, the current version does not allow dropping elements outside the tree into this tree. This will be addressed in the future, but the release date has not yet been determined.

MrPrometheus commented 2 years ago

@minop1205 I don't need to drag items from your tree, I need to create them. Only the creation trigger of this element is not a button. An item creation trigger is dragging something from somewhere else onto your tree, and then creating a new item.

Or is your tree unable to react in any way when something is dragged onto your tree?

minop1205 commented 2 years ago

Or is your tree unable to react in any way when something is dragged onto your tree?

That is correct. This is because at this time it is not possible to detect events when external elements are dragged.

MrPrometheus commented 2 years ago

@minop1205

Here is a visual explanation:

image

1) There is a set of blocks 1, 2 and 3 (for example, add, subtract and divide functions) 2) We drag block 1 (with block 1 physically remaining in place) onto element 0-2 and then the text of node 0-2 changes to "I was dragged block 1!!"

It is possible to implement this, for example, add to your custom node useDrop from the react-dnd library, and add useDrag from the react-dnd library to block 1. Will it work?

minop1205 commented 2 years ago

I have released v3.0.0 today.

In this version, you can now drop elements outside the tree and drag & drop between trees.

See the README and samples for details.

README

https://github.com/minop1205/react-dnd-treeview#external-drag-source

Demo and Examples (Storybook)

https://minop1205.github.io/react-dnd-treeview/

(See stories below)