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.
Related
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'm trying to do something like below:
Scenario 1: User will drag and drop List 1 from left side to right side.
Scenario 2: Again, User will drag list 2 to right side, when that dragging item hover on list 1, have to show drop zones to drop that list 2 item here.
Finally, List 1 and List 2 both will be placed like left and right side.
With React Dnd, Is this achievable? and I tried this it works only while dragging. https://stackblitz.com/edit/react-pctpdh
I'm able to show a drop area while dragging, it shows every time, but I need to show that drop area only hover on some item.
Below is the sample work, I have to achieve:
Need to show placeholder to drop an item while hover other items to drop. (Need to Create dynamic drop targets while mouse hover some item)
I need a help on this to achieve this feature.Any idea on this really commendable.
I saw the code snippet and i added some new code that replicates your desired behavior.
The idea is to create a separate component to handle drop actions, that can be reused when is needed. In this particular case, I choose to use the component inside your ListItem component to create two drop zones on both sides.
Here is the updated code: https://stackblitz.com/edit/react-pctpdh
I can't delete components that I have already shown because of ads placed in items of the list.
(Here is description why I can't delete ads)
So I want to virtualize only items below and when I'm scrolling down do not delete items that I have already shown already.
Current behavior:
Expected behavior:
Without logs from componentWillUnmount
(Bottom components still virtualized and won't mounting)
Here's a CodeSandbox example!
Or maybe somebody nows another tool that can help me?
Im currently developing a react app which has a virtualized list (https://github.com/bvaughn/react-virtualized) in it. The items in the list may contain a select dropdown.
The problem now:
The virtualized list is hiding overflow. So the last items dropdown is not displayed and you cannot scroll down to view the content of the dropdown:
================= Here is where the image ends ================
I have no idea, how I could fix this issue, without changing the virtualized list code. Anybody out there?
react-virtualized can't use overflow: visible without breaking scroll behavior (which is pretty key to how react-virtualized works). So things like drop-downs will get clipped as you've observed.
What I typically recommend for people wanting to put things like drop-down menus inside of react-virtualized rows is to use a portal. This allows the menu content to expand outside of a single row (or even the entire List) without being clipped.
I've used tajo/react-portal in the past for this.
I am working on drag drop functionality where one can drag node from list A(source) and drop to list B(destination).
I am facing problem of when once dragged and dropped first node and opens model on-click, I have to set some question within ng-repeat.
But when i am dropping same type of question, then values set to previous one is remains to newly dropped question's model.
How i can avoid such a problem?
I am using this ui-tree example for drag and drop.
Following image is snapshot of it?
https://i.stack.imgur.com/jIJsQ.png][2]
Please share your opinion!