I have a trello-like interface in place, implemented in React.js with the awesome ReactDnD library, and it works great with the default html5 backend. I decided to switch to the touch backend to support touch devices.
Anyway, when I switched, it "works", but since both my list columns and the cards within them are drop targets, this seems to cause a problem with this touch backend. The behavior I'm noticing is consistent with it ignoring the cards as drop target altogether, and always considering that the drop target is the list containing the card.
The reason I think this is what's happening, is that when I drag a card from one list to another, it does not matter if I'm hovering a card in the middle of the target list, the drop is marked to be made at the end of the list, which is the expected behavior when I'm hovering over an empty area of the list element. If I hover over a card in the middle, the expected behavior is to mark the drop in that place, shifting the cards below one position down.
I've even come to suspect that this has something to do with an incorrect result being returned from monitor.isOver({shallow: true})
, as I expressed in this comment on a github issue I raised, but as it is correctly stated there, that method is not implemented per backend. But maybe it's implementation uses something from the backend.
Here's the example extracted to a standalone app: https://github.com/gnapse/react-dnd-trello
It behaves as described above. There are two commits in that repo. On the initial commit the app uses the Html5 backend, and works as expected. You can checkout that commit and see how it works. Then if you checkout master once again, you can see it working with the touch backend. When you drag a card out of a list, and without dropping it you drag it back into that list, it will always mark the drop at the end, instead of in the middle, no matter where you position it in the list of cards.
Also, this happens both with touch and with mouse events. I tested it in an iPad simulator though, not the real thing.
I submitted an issue report to the react-dnd-touch-backend
but haven't had any luck over there. I considered submitting an issue to the react-dnd
repo as well, but since this is not clearly a bug in that project, I decided to post it here.