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" ?

On Tuesday, June 6, 2023 at 9:24:51 PM UTC-5, luserdroog wrote:
> 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" ?

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.

On Thursday, June 8, 2023 at 10:36:15 AM UTC-5, luserdroog wrote:
> On Tuesday, June 6, 2023 at 9:24:51 PM UTC-5, luserdroog wrote:
> > 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" ?
> 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.

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?).

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>

New places opened, You are all welcomed there !
⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀✦
⠀✦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀✦⠀
⠀✦⠀⠀youthmeetupplace.talk4fun.net/a.php⠀⠀⠀✦⠀
⠀✦⠀⠀⠀kohtumispaik3.66ghz.com/a.php⠀⠀⠀⠀⠀✦⠀
⠀✦⠀⠀⠀⠀anglezzzzzzz.likesyou.org/a.php⠀⠀⠀⠀⠀ ✦⠀
⠀✦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀✦⠀
⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦⠀⠀✦
⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀⠀⠀↑⠀

On Wednesday, June 7, 2023 at 5:24:51 AM UTC+3, luserdroog wrote:
> 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" ?