I have a requirement to do the following
I have implemented this farily well with onmousedown
, onmouseenter
and onmouseleave
, adding a onmouseup
to the document where I handle the last step.
The problem is, that I need this to work in a mobile device. I have managed to implement dragging div
s with a touchstart
, touchmove
combination and it was straightforward. Now I attempted to implement the behavior described above but I found out that,
touchenter
or touchleave
events, and that touchmove
apparently is only triggered if the target had already had a touchstart
event.It's frustrating that there is no seamless way to do this, I do understand that touch devices are not the same as mouses, but there are common behaviors that I consider should be treated without much difference, and only treat differently the special things that each device has.
If there is a way to do this, I am really going to be grateful, because I am very tired of reading documentation and trying things that appear to solve the problem but don't.
As requested in the comments, this is my grid
Note that this grid, is not static, nor is it created directly with HTML, it's extracted from a file and generated with a different program, it's simply a <table>
.
My final solution is to add a touchmove
listener on the container (the table body), and then using elementFromPoint()
trigger the event for the given element manually.
I keep track of the last element for which the event was triggered, to prevent doing it more than once. And it also allows to trigger touchleave
if required.