Is it possible to drag/drop and change the sorting of the Material UI Cards? If so, how?
https://material-ui.com/components/cards/
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.
Related
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
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 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.
Can we drag and drop md-list item or md-cards in angular material design using jQuery or other framework?
I can give a partial answer to this. It is not recommended to add jQuery to an Angular project. Angular is controller-centric while jQuery is focused on manipulating the DOM. They are really different approaches, and while you could possibly get something to work using jQuery and Angular together--it would tend to be a fragile and overly complex solution.
The same holds for Angular Material. It's not a great basis for jQuery operations.
That having been said, see also my comment on your question. I read through all the documentation on http://material.angularjs.org and found nothing that suggests built-in support for drag/drop operations in general nor for dragging cards around in a list.
I realize the framework is still pretty new but I am surprised to find that something as essential to the Material Design concept as dragging cards around a list simply wasn't addressed. So perhaps you and I both are confused or missing something that should be glaringly obvious.
Are there any WPF libraries similar to jQuery UI?
I especially like the Sortable interaction:
and Resizable interaction:
Would be great if these 2 interactions could be combined.
Thanks.
The panels are just an Expander in WPF world, as far as I can see. To make them "Sortable" you need to create a custom panel that works like a wrap panel and hosts Expanders, and add drag and drop functionality. Shouldn't be too hard to do, but I haven't seen one around (at least in free / open-source components).