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
Related
I want to build a form with Drag and drop functionality in ReactJs. This form will have conditional features. Users can dynamically set conditions according to their choice on whichever form field they want.
I know there is a library called beautiful DnD for Drag and drop functionality. Using this library I can drag and drop one item from one area to another droppable area. But, I just want to drag a copy of one form element to the droppable area and want the draggable element stays there in case I user wants to drag and drop the same form element again.
How can I achieve this?
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.
I'm new with react native, and I'm trying to achieve the exact same effect as Instagram or TikTok when you click an item in a gridview it opens up a listview with details of the items with a zoom in effect.
For now, I have a gridview, where data load with a limit of 10 items and when reaching the end gets the next 10 items. In order to try and achieve what I want to do, been searching but can't seem to figure out the right approach.
Should I have both list in the same screen, but how do I get the app to do the zoom in effect and open the detail view at the right index item ? Or should I have both list in separate views, but how do I keep the data synced ? Or is there another way that I'm missing and keep seem to find ?
Image might help understand (taken from instagram)
I'm using react-selectable-fast on a list of items that can be selected. However an item or a group of selected items should also be draggable, which is implemented using react-dnd.
The issue is that the selecting comes in the way of dragging; when hovering on top of an item and trying to drag it I end up selecting instead.
I've managed to fix the issue with a hack: store in state whether currently hovering an item or a group of selected items and if so disable the <SelectableGroup>. However this means that the whole list of items is rerendered every time I move the mouse over an item.
So I would like a better solution but I haven't been able to find one. In the last attempt I put the draggable element (using connectDragSource) on top of the selectable element (using createSelectable) again on top of <SelectableGroup /> and gave them increasing z-indexes, also tried playing around with stopPropagation() and preventDefault() but still the selecting overrides the dragging.
Any ideas?
I have an inherited React app that i need to fix but after a few days, im stuck and need help.
I have a filtering panel on the left side which contains a 5 categories and items within their categories below it, each item has a checkbox next to it and when you click it, it updates the results on the right side, this works fine.
However i have a task to update the numbers next to the links in the filter panel, based on what was clicked and would like to know if there is a way to create the filters links first and then only update the number next to the link upon click.
All the code resides in the render method, any help would be great.