Skip to content
This repository has been archived by the owner on Jun 18, 2018. It is now read-only.

Add touch support via custom simulated drag events. #50

Closed
wants to merge 1 commit into from

Conversation

Neilos
Copy link

@Neilos Neilos 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
Copy link
Author

Neilos 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
Copy link

@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
Copy link
Author

Neilos commented Nov 21, 2016

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

@treyreynolds
Copy link

@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
Copy link
Author

Neilos 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
Copy link
Author

Neilos commented Feb 10, 2017

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants