search

react-dnd / react-dnd-html5-backend

HTML5 backend for React DnD [Legacy Repo]
MIT License
145 stars 97 forks source link

Add touch support via custom simulated drag events. #50

Closed Neilos closed 7 years ago

Neilos commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

treyreynolds commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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