Comments (15)
I was able to enable touch dragging without any changes to the component. SortableTreeWithoutDndContext
is provided so you can specify your own context at which point you can wrap your app with:
export default DragDropContext(TouchBackend({enabledMouseEvents: true}))(MyApp);
Or to keep the default backend for desktop given this comment on the TouchBackend project page:
NOTE: This is buggy due to the difference in touchstart/touchend event propagation compared to mousedown/mouseup/click. I highly recommend that you use react-dnd-html5-backend instead for a more performant native HTML5 drag capability.*
I used this where I enable mouse events for devices such as the Surface with both touch and mouse (substitute your favourite browser detection lib for isTouch):
export default DragDropContext(isTouch() ? TouchBackend({enabledMouseEvents: true}) : HTML5Backend)(MyApp);
I haven't tested extensively, but drag'n'drop was working on both desktop and iOS.
from react-sortable-tree.
@fritz-c - touch to drag on handles only, touch to scroll everywhere else, problem solved
css alterations, fits on small screen
please reconsider
from react-sortable-tree.
@evilangelist Thanks for the info! I used it and put together a little experimental demo on the newly created storybook.
from react-sortable-tree.
Awesome- I'll check it out and test for you.
Another quick question. With the search function- is it possible that it "Hides" items which don't match the search? This could be a clean way to arrange similar items?
from react-sortable-tree.
Hey @yarnball
Any success with this?
from react-sortable-tree.
@karev @Anton-Aleksandrov @yarnball
Thank for author's prompt! Only replace a modules can support mobile and touch event.
The PR link
from react-sortable-tree.
This library uses react-dnd for all the drag-and-drop stuff, which offers options for the backend - the react-dnd official HTML5 native, desktop-only drag-and-drop backend (currently used), and an independently developed touch backend. The touch backend should theoretically support touchscreen devices, but I haven't tested it at all.
If lack of touch functionality is a deal breaker for you, it would be a great help to me and others if you try out the touch backend and see if it does everything on mobile without breaking the desktop experience (which I fear it might).
from react-sortable-tree.
Wonderful! That will be a great help.
As for the hiding thing, I've created a new issue to discuss it (#9)
from react-sortable-tree.
any news for the touch support ??
from react-sortable-tree.
@karev
I'm not planning to add it. I think the scope of the changes involved would make it a better candidate for a new fork or a new repository. For one, the current UI wouldn't translate well to a small screen. Also, distinguishing a touch (to drag) event from a touch (to scroll the screen) event takes quite a bit of finesse.
from react-sortable-tree.
I'm also keen to get this working- will to check it out. Thanks!
from react-sortable-tree.
Would also like bump this thread for reconsideration. This component is already so useful, but not making it responsive is holding me back from using it to the extent I would like to use it.
Regardless, thanks for the hard work.
from react-sortable-tree.
well, I use it in a stateless function. It came out ...
Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.
from react-sortable-tree.
Does this mean, it will work on react native also? (React/react native beginner here.)
from react-sortable-tree.
@abhinavzspace it will not work on react native. React native uses different primitive elements, like View instead of div, etc.
from react-sortable-tree.
Related Issues (20)
- How to use props with redux ? HOT 1
- React version dependency issue HOT 5
- how to make search nodes only starting from one node which we clicked ?
- Is it possible to make the react sortable tree ui less big with a setting : sm, md, bg ?
- React dnd upgrade HOT 2
- How to customize move handler? 🤔 HOT 2
- div is fadeout when drag
- Insert node at specific index under parent node.Iindex HOT 1
- It is possible to use a node as ReactRef() ? HOT 1
- Give Children another label/property name
- Failed to minify the code error HOT 2
- getTreeFromFlatData set rootKey as null
- Support multiple dragging
- Option to snap automatically to nearest possible level HOT 1
- Support React 18 HOT 1
- new child is added to the parent when collapsing the parent HOT 1
- Using the react-sortable-tree in react 18 HOT 4
- is it possible to display the tree as a vertical tree diagram?
- About maintenance of this library
- Could not resolve dependency: React 18 with [email protected] HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-sortable-tree.