CODEWITHSUNDEEP
reactjsmaterial-ui
Reis
Reis

Reputation: 656

How to Drag/Drop Material-UI Cards

Is it possible to drag/drop and change the sorting of the Material UI Cards? If so, how? https://material-ui.com/components/cards/

Upvotes: 30

Views: 86925

Answers (2)

alpha-helix
alpha-helix

Reputation: 139

Found this new library @dnd-kit/core. Looks nice and has lots of options. You can check examples here

Upvotes: 3

Vencovsky
Vencovsky

Reputation: 31683

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.

Upvotes: 44

Related Questions