New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[tree view] Add drag & drop support #9686
Comments
Hey @oliviertassinari thanks for the link! However, even though I may use this in the future, what I wanted now was a very simple behavior, like the native html drag n drop. I just wanted to add the draggable=true attribute to a TreeItem. |
@felipezacani What stops you from achieving it? |
Not really sure if there is any other way of passing the attribute to the correct native item. I tried the same as I did successfuly with the Paper component, adding a "draggable={true}" to its tag, it doesn't work and its not passed down to any native component (checked on FirefoxDev inspector). I also noticed userSelect="none" has no effect on the TreeItems. |
@oliviertassinari problem was on my side, I had another component (mounted) using react-dnd. I'm still not sure why exactly, but if a react-dnd component is mounted, all other native draggable attributes are disabled (unless you use react-dnd in everything, of course). Thanks anyway! |
1 similar comment
This comment has been minimized.
This comment has been minimized.
This comment was marked as duplicate.
This comment was marked as duplicate.
Perhaps if we could use the prop for onFocus in TreeItem, we could trade off the keyboard navigation for dragging. My use case I need the drag and don't need the keyboard navigation. The TreeItem uses the below function for onFocus, which breaks the drag with the prevent scroll. I have tried to turn this off using the TreeView prop onNodeFocus but that ends up in a loop... |
Here is how I'm using react-dnd with TreeView: https://codesandbox.io/s/dawn-resonance-pgefk?file=/src/Demo.js Could be useful to some |
This is not working in any chromium browsers for me (95.0.4638.69). Only Firefox. Is it working for you @joziahg ? |
This is a known issue, you can follow it here mui/material-ui#29518 |
@oliviertassinari Currently evaluating mui pro for a client project. Being able to perform dnd with the TreeView is a big part of the workflow. Tried the following:
The drag events are triggered with FireFox but not with Chrome/Edge. Is there a workaround to make this work? |
Just wondering but TreeView is advertised in the MUI-X product, but I can't personally see any noticeable difference between the standard MUI and MUIX versions? Is this correct? |
I would like to share a few learnings from the last couple of days of working on drag'n'drop and the MUI tree view: I have created a sandbox based on this repo to illustrate my points. The upper tree view in the sandbox uses a The bottom tree view uses a The two drop targets to the right are identical; a few sample The app in the sandbox suffers from issue mui/material-ui#29518: In Firefox, drag'n'drop works for both tree views; for Chrome or Safari, I am using the A few things to note about the upper tree view:
My personal impression so far is that it might not be the best approach to try and make the About the bottom tree:
The drawback: As stated, the bottom tree currently only works in Firefox. Obviously unacceptable for a production app. Also, I'm not much of a UI/UX guy, but IMHO, as a user, I would expect to drag only the item itself around, not an item of a tree view. Look at a tree view in macOS Finder or Windows Explorer: The "production" Finally, I have a few related questions that are probably too specific for StackOverflow, so asking here:
Could anyone kindly share some thoughts and possibly lend a hand in getting drag'n'drop to work ? It's not a major problem for my use case if the focus breaks or whatnot, but getting this to work in all major browsers would be mean huge progress for my current project. Just my 2 cents. Thank you very much for your attention. |
This comment was marked as resolved.
This comment was marked as resolved.
What about using arborist and using MUI for the themed elements? |
An initial issue to keep track of our progress on the drag & drop feature. Note that we won't make it MIT.
Benchmarks
The text was updated successfully, but these errors were encountered: