I need to create somethink like this using react-beautiful-dnd
all list elements are draggable
The solution I have seen for a nested list is to use the react beautiful dnd (RBD) tree. Here is a link to the tree, and another link that describes considering the integration into RBD.
Related
I have to create a drag and drop functionalities to some dynamically created list items just like the image below:
Here the, items will be displayed by using flex and items will be wrapped by flex-wrap: wrap so that it adjust the items into multi lines. I need to add the drag and drop functionalities here so that I can move the individual items anywhere within the lists.
I have found some libraries like: react-beautiful-dnd but it doesn't allow handling the drag and drop to multiple lines.Does anybody have some good recommendations, how to acheive this or which library I should use. Thanks in advance.
can't find a dnd component under my requirement
https://react-beautiful-dnd.netlify.app/?path=/story/multi-drag--pattern
this component is perfect, but when dragging, I need all the elements to be selected, and not just one, as here
https://nikhilbaradwaj.github.io/ReactMultiDnD/
maybe someone saw such a solution?
No libraries implements this out of the box. Such functionality should be implemented manually.
I want to drag and pass object element between 2 components, I did not found any materiel and package with this use case.
I have two components name Assets and Listing. In Assets component I have multiple lists, I can select multiple lists from Assets component and want to drag these selected lists and drop them in Listing component.
I don't know if this is possible or not.
Thanks
I've been researching a way to drag and drop list items and found a few like React Beautiful DND and React Draggable, but what I want is to drag and drop a list item over another and create a nested list with both list items inside is there a package that does that or should I use one of those packages and implement the logic my self
I stumbled upon your question and I have made a very basic npm package which might solve what you are asking for. This package implements basic drag and drop functionality with events on drag and on drop only (no logic for actually moving the elements). Maybe it helps you. Here is a link to the repository with example code:
https://github.com/githubjonas/react-tiny-drag-drop
you can use sortableJs for a nested list here its reference link:
https://sortablejs.github.io/Sortable/#nested
I am working on a project that requires a tree-view component with following features,
New entry will be added if a draggable component of specific type is dropped on any existing node.
Nodes are sortable
Nodes can be deleted using a context menu
So far rc-tree is the closest match I found. But it doesn't seem to have the capability to add node via external component drop. When attempting to drop a simple droppable component like this,
<p className="rat" style={{"backgroundColor": "#ddd"}} draggable>Draggable</p>
it's throwing error when dragged over a node:
Uncaught TypeError: Cannot read property 'props' of undefined.
How can I make an external draggable component compatible? Or, is there a better way or at least a different library?