I have a series of elements, I want the user to touch the first element, then drag their finger across a number of subsequent elements. I can detect the initial touch with the (touchstart) event, I can detect movement with the (touchmove) event, however that event only triggers on the initial element, even if the touch area has moved away from the element. touchstart/touchmove isn’t triggered on any subsequent element during the action. How can I detect when they are moving over subsequent elements?
I was expecting a pretty quick answer, seems like it’s not a very out-there use case. Am I going to have to get creative? Surely this must have already been solved by someone…
Have you got any solution yet?? I’m also facing same issue.
GO back up one level, what are you trying to achieve?
I like a weekend challenge.
Yes I devised my own solution.
I registered a touch handler on the container of the elements, then on the elements themselves I had an input that accepts the touch event, and an output event that fires when the element detects it was touched.
The elements have a function that checks the touch event and compares the x/y coordinates with their own position. If the touch event is within those bounds the element emits the signal event that they have been touched so the container logic can keep track of which elements were swiped over in which order.
Seems a little complicated, but it’s logical and it works. I was worried about performance with large amounts of elements but I’ve tested with as many as 144 (12x12 grid) and there’s no noticeable issues.
1 Like
Please… can you show me how it really works?.. coz i have the same problem and i could’nt find any way on how am i going to implement this one. Thank you!
Nice but do you mean the touch move event?
Each element reacts to the touchMove event to continually compare there position with the events coordinates ?
Yes that’s correct.
The container component registers the move event, passes it down to each of the child components. The child components compare the coordinates of the move event with their own perimeter coordinates, and if it’s in bounds, emits an event that is picked up by the container component. The container component has tracking logic so it keeps a log of which child-components emitted a positive result in which order.
Sorry @weggie67 I don’t have the code handy to share, and it’s not in a production-ready state yet as I ended up switching projects before finishing. If you have a good handle on how to create custom components and use the input/emit events you should be able to make it work with my description.