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?
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'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 find that when a div containing text is draggable I can't select the text.
If I remove the DnD stuff then I can select the text.
Is there a way of having both?
A key wrinkle in the question seems to be which precise UX design to support.
A state toggle is one way to resolve that issue. Place a checkbox or other toggle control somewhere, either per-item or global. When toggled with drag off and select on, (let's call this the "off" state), then user could select. When toggled drag on and select off (let's call this the "on" state), then user could drag. You could leverage React to enable DnD behavior only in the latter case of "on" state (like even literally don't include the drag-and-drop wrappers when "off").
Another option is some other gesture recognition like long-click/tap, which react-dnd may not support. You've mentioned some other possibilities like double-click and making the text itself not draggable.
I want to implement a functionality in which when I click on joint.js node extended by backbone view a div should appear around this element which will contain cross button and arrow button.
When clicked on cross the node should be removed from paper of joint js when clicked on arrow user should be able to draw arrow. when click on other part of paper that div around element should disappear.
I am following this link http://jointjs.com/tutorial/html-elements.
what is the best approach of implementing this functionality as my own approach of hiding and showing divs around element is not working.
Can you have HTML ids or classes for the drop down filter/sort widget in extjs Grids?
What I mean is this component :
It's needed for test automation purposes. However we can probably live with it if its not possible, using some fancy CSS selectors instead.
Grid column menu can be quite tricky to test. The main problem that I see is that its html markup does not exist before you click on the column menu button (down arrow). When you click it the main menu with sort, columns and optionally filters is rendered (html markup is created), however, columns submenu html still does not exist. It is created when you move mouse over Columns item of main menu when the submenu is rendered and shown.
From that point on it exists for all columns because only one menu is use for all.
Thus, for testing, you would either need to simulate mouse clicks/moves or manually render the menu/submenu.
You can find out CSS classes involved (after the menu is rendered) by using developer tools to inspect the html markup.