React newbie here.
I am looking for a way to add drag and drop functionality to my website. The goal is to move cards in a grid (I am currently using tailwind css to handle the grid). I found a few libraries that enable drag and drop but none that would:
work in a grid, i.e. in 2D
snap the cards to the grid
reorganize the cards when one is moved (to prevent overlapping)
I tried using react-beautiful-dnd but it seems to only be suitable for lists (i.e. 1D). I also tried react-dnd but I couldn't make it work either, I don't think it is meant to be used in a grid.
I found some libraries that do exactly what I want in angular (https://stackblitz.com/edit/angular-dragdrop-grid) and in vue (https://codesandbox.io/s/j4vn761455), but I can't seem to find react equivalents.
Would you know a react library I could use?
Thanks
Related
I am building something like trello board that has dnd feature between columns and items inside the column. I want to build auto-scrolling when dragging the item to the end of parent container.
But I am getting warning whenever dragging items
It seems like react-beautiful-dnd doesn't support multi scroll container like trello.
Don't we have solution for this? or do we need to implement it by controlling the scrollbar manually?
You can check the issue correctly from below video.
https://www.screencast.com/t/0MLoafdls
Thanks in advance
After struggling in order to resolve this issue, I turned out to use another dnd library - https://dndkit.com/, it resolved all the issues that I had in react-beautiful-dnd
To give you the context, I built a dashboard with a material-ui grid with 3 different sizes of widgets (small, medium and large).
The widgets are not drag and drop and to move the widgets you have to go to another page of the application which is not very UX design. I've never dragged and dropped with react and I'm wondering if there is an easy way to make my material-ui drag and drop grid. I would like to have some suggestions, examples if you have thank you in advance for your help.
For information I saw that there were several libraries (react-beautiful-dnd, dnd-kit)
Here is what I have tried with dnd-kit but I cannot make my grid easily drag and drop :
https://codesandbox.io/s/dndkit-material-ui-grid-sample-ck6l3?file=/src/App.js
I was looking at websites like https://milanote.com/ and I am trying to implement image manipulation (functions such as dragging, resizing, cropping), and I noticed that they tend not to use HTML canvas. I've looked into react libraries that support drag and drop, but I have not found one supports image rescaling.
Any suggestions or idea to the best approach to this?
react-grid-layout is a complex grid layout system. You can set the image as a background of a grid element. There are a lot of possibilites.
I am using Ant Design's draggable table in a project. I am using the source code that is available for the example on their website. It works fine with drag and drop functionality but I want to change the animation when I am dragging a row. Right now it shows the snapshot of the row selected while dragging it around.
I went through the React-DnD documentation, since it is what is being used by antd. In it, there is a mention of DragPreviewImage. Now I assume it would be what is required but since I am very new to it, I am having a hard time in discovering how to fit what they say into the simple example given on the antd's website.
Following is the link to the sandbox: https://codesandbox.io/embed/dazzling-sammet-e41lf
I would like anyone's help to show me how we can change the drag animation in this source code. I will be very thankful.
I am trying to create a feature of drag and drop rows between two grids in Reactjs. I tried using several libraries(like ag-grid, react-beautiful-dnd, Kendo UI etc.) but none of them are serving my purpose. Either the library does not support drag and drop between different elements or the feature is not supported in IE11. Can anyone suggest any solution to this.
Thank you.