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
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.
I want to be able to drag, rearrange, and move them from 1 list to another. Functionally it currently partially works in that you can drag an item once and it updates but after that you can no longer move the items inside the list.
Example here:
https://codesandbox.io/s/react-dnd-multiple-lists-8z7vs?file=/src/question.tsx
Any hints or pointers would be very helpful.
Thanks
I have created a new example here:
https://codesandbox.io/s/eager-perlman-zs3xm?file=/src/Container.tsx
It is simplified, I am now able to drag a component from one section to another. But it seems to bug out when trying to drag from one to another.
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 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.
Has anyone worked on Ext JS here, I need help to resolve an issue.
There are two multiselects Component, and I need to drag and drop items from one multiselect to another.
The issue I am facing is: I am able to drag from One MultiSelect(1st) and drop to another MultiSelect(2nd) only when I am dropping over an already existing element in 2nd MultiSelect.
I am not able to drop to 2nd MultiSelect when I try to drop over an empty space.
I tried to look at the code, but didn't found anything. Is this the way the MultiSelect component works in Ext JS.