I am would like to use material-ui chips in my react-app. The problem is that I would like to move the chips with drag and drop. This functionality is not supported by <code>material ui</code>. Is there a workaround / extension to get chips draggable? <!-- If there is no other way, I would change to another library. Does anyone know one? Thank you //EDIT-Good solution You can make any component draggable with react-beautiful-dnd

You can use the Draggable component from material UI: <pre class="prettyprint"><code><Draggable><Chip label="your chip" /></Draggable> </code></pre> See full example: https://material-ui.com/demos/dialogs/#draggable-dialog

material-ui chips - drag and drop support

Q: Do big companies use material UI?

233 companies reportedly use Material-UI in their tech stacks, including medium.com, MAK IT, and Scale.

Q: What is chip MUI?

Chips are compact elements that represent an input, attribute, or action. Chips allow users to enter information, make selections, filter content, or trigger actions.

Tags:

I am would like to use material-ui chips in my react-app. The problem is that I would like to move the chips with drag and drop. This functionality is not supported by material ui. Is there a workaround / extension to get chips draggable? <!--

If there is no other way, I would change to another library. Does anyone know one? Thank you

//EDIT-Good solution

You can make any component draggable with react-beautiful-dnd

424

asked Apr 23 '19 12:04

Paul

1 Answers

You can use the Draggable component from material UI:

<Draggable><Chip label="your chip" /></Draggable>

See full example: https://material-ui.com/demos/dialogs/#draggable-dialog

answered Oct 05 '22 01:10

Simon Thiel

Related questions
                            
                                How to copy data from old json to new json in javascript?
                            
                                How to add List of Object to Firestore?
                            
                                IntelliSense complains about missing Microsoft.AspNetCore packages despite being there
                            
                                Optional Parameter on Vue Router
                            
                                How to Avoid throwing 400 errors from ExpressJS
                            
                                Increment counter in nested v-for
                            
                                sbt-native-packager: Scala App on Alpine Docker Image fails with permission denied
                            
                                Value cannot be null error when using GenerateEmailConfirmationTokenAsync?
                            
                                javax.net.ssl.SSLHandshakeException: No available authentication scheme
                            
                                Does Both Referencing an Asset Catalogue and Including it from a Framework Create Duplication?
                            
                                OpenJdk initial startup time very slow
                            
                                Android Chrome Webview access to Google Pay is not working

Donate For Us

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