Skip to content
This repository has been archived by the owner. It is now read-only.

Add touch support via custom simulated drag events. #50

Closed
wants to merge 1 commit into from

Conversation

Projects
None yet
3 participants
@Neilos
Copy link

commented Nov 8, 2016

This pull request adds drag and drop support for touch devices to react-dnd-html5-backend, removing the need to switch between different backends (i.e. no need to use react-dnd-touch-backend anymore). It aims to address some of the wishes raised in the issue 16 and pull request 240 in react-dnd

It works by using the library touch-dnd-custom-events to map touch events (touchstart, touchmove, touchend) to custom versions of html5 drag and drop events as follows:

touch event drag event(s)
touchstart touchdragstart
touchmove touchdrag
touchdragenter
touchdragover
touchdragleave
touchend touchdrop
touchdragend

The custom drag events generated by touch-dnd-custom-events are crafted to comply with the html spec for Drag and Drop. This allows react-dnd-html5-backend (or any other library using touch-dnd-custom-events) to treat these custom events as if they were browser generated drag and drop events. (Duck Typing for the win!)

@Neilos

This comment has been minimized.

Copy link
Author

commented Nov 8, 2016

If this pull request is closed without merging, then, for those who desire it, I have created a separate library react-dnd-html5-with-touch-backend, which is just a thin wrapper around react-dnd-html5-backend, but with the addition of touch support in the same way as outlined in this pull request. Hope this of some use to people.

@mkozhukharenko

This comment has been minimized.

Copy link

commented Nov 20, 2016

@Neilos It does not work properly for me. I took the 'Simple sort' example from the 'react-dnd' docs and added 'react-dnd-html5-with-touch-backend' as a backend. But I can move card only to top and the next error is thrown all the time:

simulateEvent: arguments can't be undefined
@Neilos

This comment has been minimized.

Copy link
Author

commented Nov 21, 2016

OK @mkozhukharenko. I'll try to take a look at that some time this week.

@treyreynolds

This comment has been minimized.

Copy link

commented Jan 11, 2017

@Neilos I appreciate you working on the hybrid HTML5/Touch approach. I also am unable to get the touch portion working correctly. My app uses touch on both mobile and desktop and I don't want to have to try to detect which and change out the backend dynamically.

@Neilos

This comment has been minimized.

Copy link
Author

commented Jan 12, 2017

@treyreynolds I definitely have some more work to do on this. Sorry I haven't gotten around to it. Hope to do so at some point. A cursory look a few weeks back seemed to suggest a problem with the custom events I am generating in this library https://github.com/Neilos/touch-dnd-custom-events. I thought I'd complied with the HTML5 spec but something is apparently lacking in the functionality of my events.

@Neilos

This comment has been minimized.

Copy link
Author

commented Feb 10, 2017

Now that React-Dnd has been restructured as a monorepo this pull request is obsolete. Also, it doesn't work.

@Neilos Neilos closed this Feb 10, 2017

@Neilos Neilos deleted the Neilos:touch-support branch Jan 25, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.