Menu
Is it possible to drag/drop and change the sorting of the Material UI Cards? If so, how? https://material-ui.com/components/cards/
703
> Material UI uses a very similar theming system. The interface of the theme itself is different, but that seems to be about it there. Material UI implements Material UI by default and this is the main reason why it's hard to customize.
To set the card height with React Material UI, we can set the style prop of the Card . to set the style prop of the Card to an object that has the height of the card. As a result, the card height should be set to 45vw.
Is it possible to drag/drop and change the sorting of the Material UI Cards/
Yes.
how?
You can use react-dnd or react-beautiful-dnd.
They have alot of examples on how to do it and you can check it here for react-dnd.
Here is a working example of how to do it and, which is based on react-dnd examples.
And this is what react-beautiful-dnd has to say about both options:
There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature. react-beautiful-dnd is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality react-beautiful-dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd. So react-beautiful-dnd might not be for you depending on what your use case is.
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
