Material-ui: Add drag & drop component

[Lagicrus]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Drag and drop components to reorder/reorganise them. Components that could use this could be either lists, grids, or chips.
Such as described on uxdesign and mentioned briefly on material.io

For lists it could be done via an Icon which has that functionality whilst the rest of the ListItem does not, and you drag the "handle", not the list itself.
For more "boxy" elements, could work as a wrapper around the entire element OR as an icon in a corner which the user grabs.

Icon wise some ideas could be the drag handle, open_with, or toggle with CSS between the grab and grabbing cursor icon as outlined on MDN

Examples 🌈

http://materialdesignadmin.com/sortable.html which I think uses https://github.com/SortableJS/Sortable
https://jsbin.com/visimub/edit?html,js,output

Motivation 🔦

An easy way for developers to allow users to reorganise images, text and such like which are grouped together, alternatively as a quiz/ranking system of a 1 to 10 "Organise this list in the order in which you like these flavours of ice-cream" (like this )

[Lagicrus]

Updated Summary to better expand on Icons & CSS that seems to be commonly used for this system 👌

[vizardkill]

It would be great to see this add-on

[TheHolyWaffle]

So ... basically react-beautiful-dnd? I don't think there would be any extra value if Material UI were to re-implement that behavior.

[Lagicrus]

So ... basically react-beautiful-dnd? I don't think there would be any extra value if Material UI were to re-implement that behaviour.

That is fair. I was unaware that existed.
I just felt, and do still feel that having it more baked into Material vs wrapping it in that module, allows for better/lower integration with Material components allowing more powerful and simpler integrations.

Additionally, in my opinion, if Material were to implement this enhancement themselves then it would be easier for developers to use, especially in the long run Vs just adding another dependency to the ever-growing list that is the package file.

Not to mention more likely to be shown in the documentation as a feature/way to do things, Vs an external package which would at best get a mention on the Related-Products page.

[oliviertassinari]

adding another dependency to the ever-growing list that is the package file

@Lagicrus I'm curious to hear more about this. What's issues have you faced with growing the list of dependencies in the package.json?

[Lagicrus]

adding another dependency to the ever-growing list that is the package file

@Lagicrus I'm curious to hear more about this. What's issues have you faced with growing the list of dependencies in the package.json?

Perhaps I worded this badly. But nothing wrong with Material.
What I was trying to explain was, with the way I see Material-UI growing, you are more likely to make it yourself in some fashion Vs just adding an additional requirement for this 1 thing, which increases the bulk of installing, adds more sub-dependencies and chances for vulnerabilities.
Or at least, that is my understanding.

[hc-codersatlas]

react-beautiful-dnd doesn't have material-ui design and uses emotion instead. For the record there's also react-dnd.