Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Is there a trick to drag and drop on mobile browser?

336 views
Skip to first unread message

luserdroog

unread,
Jun 6, 2023, 10:24:51 PM6/6/23
to
I've been trying to write a simple web app that uses drag and drop.
It works fine on a desktop with a mouse, capturing "dragstart" and
"dragend" for the draggable=true element and capturing "dragenter",
"dragover" and "drop" on the target element.

I added listeners for "touchstart" and "touchend" and had the latter
simply call my drop handler function. And that got it to work with
the touchscreen on my windows laptop, but no dice on an android
phone. Is there an extra trick I didn't describe doing here? I'm calling
event.preventDefault() in the handlers for "dragenter" and "dragover".
Do I need to prevent the default action with "touchstart" ?

luserdroog

unread,
Jun 8, 2023, 11:36:15 AM6/8/23
to
Some further searching suggests the answer might be to work with Pointer
events rather than Touch and/or Drag&Drop. It seems that some of the
Touch api on android chrome might be trying to use a deprecated
Element.setCapture() method.

luserdroog

unread,
Jun 9, 2023, 10:40:16 PM6/9/23
to
After much fumbling and fretting, the only "trick" I've found in getting it
to work was adding "touch-action:none" very precisely in the css. If I put it
around the whole table then you couldn't scroll away once you scroll the
table into view, so it had to be just on the "TD" element that I wanted to
manipulate. I had to learn and use the :has() whachacallit (pseudoclass?).

Michael Haufe (TNO)

unread,
Jun 19, 2023, 2:40:51 PM6/19/23
to
On Friday, June 9, 2023 at 9:40:16 PM UTC-5, luserdroog wrote:
> [...]
> After much fumbling and fretting, the only "trick" I've found in getting it
> to work was adding "touch-action:none" very precisely in the css. If I put it
> around the whole table then you couldn't scroll away once you scroll the
> table into view, so it had to be just on the "TD" element that I wanted to
> manipulate. I had to learn and use the :has() whachacallit (pseudoclass?).


You might find this useful as well:

<https://simblob.blogspot.com/2023/02/making-of-draggable-objects.html>

W

unread,
Jun 26, 2023, 7:47:39 AM6/26/23
to
New places opened, You are all welcomed there !
⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀✦
⠀✦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀✦⠀
⠀✦⠀⠀youthmeetupplace.talk4fun.net/a.php⠀⠀⠀✦⠀
⠀✦⠀⠀⠀kohtumispaik3.66ghz.com/a.php⠀⠀⠀⠀⠀✦⠀
⠀✦⠀⠀⠀⠀anglezzzzzzz.likesyou.org/a.php⠀⠀⠀⠀⠀ ✦⠀
⠀✦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀✦⠀
⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦

⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀
0 new messages