1. Forum
  2. Usenet
  3. COMP.LANG.JAVASCRIPT

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

    From luserdroog@21:1/5 to All on Tue Jun 6 19:24:46 2023
    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" ?

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From luserdroog@21:1/5 to luserdroog on Thu Jun 8 08:36:10 2023
    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.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From luserdroog@21:1/5 to luserdroog on Fri Jun 9 19:40:10 2023
    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?).

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Michael Haufe (TNO)@21:1/5 to luserdroog on Mon Jun 19 11:40:45 2023
    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>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From W@21:1/5 to All on Mon Jun 26 04:47:33 2023
    TmV3IHBsYWNlcyBvcGVuZWQsIFlvdSBhcmUgYWxsIHdlbGNvbWVkIHRoZXJlICENCuKggOKcpuKg gOKggOKcpuKggOKggOKcpuKggOKggOKcpuKggOKggOKcpuKggOKggOKcpuKggOKggOKcpuKggOKg gOKcpuKggOKggOKcpuKggOKggOKcpuKggOKcpg0K4qCA4pym4qCA4qCA4qCA4qCA4qCA4qCA4qCA 4qCA4qCA4qCA4qCA4qCA4qCA4qCA4qCA4qCA4qCA4qCA4qCA4qCA4qCA4qCA4qCA4qCA4qCA4qCA 4qCA4qCA4qCA4qCA4qCA4pym4qCADQrioIDinKbioIDioIB5b3V0aG1lZXR1cHBsYWNlLnRhbGs0 ZnVuLm5ldC9hLnBocOKggOKggOKggOKcpuKggA0K4qCA4pym4qCA4qCA4qCAa29odHVtaXNwYWlr My42Nmdoei5jb20vYS5waHDioIDioIDioIDioIDioIDinKbioIANCuKggOKcpuKggOKggOKggOKg gGFuZ2xlenp6enp6ei5saWtlc3lvdS5vcmcvYS5waHDioIDioIDioIDioIDioIAg4pym4qCADQri oIDinKbioIDioIDioIDioIDioIDioIDioIDioIDioIDioIDioIDioIDioIDioIDioIDioIDioIDi oIDioIDioIDioIDioIDioIDioIDioIDioIDioIDioIDioIDioIDioIDinKbioIANCuKggOKcpuKg gOKggOKcpuKggOKggOKcpuKggOKggOKcpuKggOKggOKcpuKggOKggOKcpuKggOKggOKcpuKggOKg gOKcpuKggOKggOKcpuKggOKggOKcpuKggOKggOKcpg0KDQrioIDioIDihpHioIDioIDioIDihpHi oIDioIDioIDihpHioIDioIDioIDihpHioIDioIDioIDihpHioIDioIDioIDihpHioIDioIDioIDi hpHioIDioIDioIDihpHioIDioIDioIDihpHioIANCg0KDQpPbiBXZWRuZXNkYXksIEp1bmUgNywg MjAyMyBhdCA1OjI0OjUx4oCvQU0gVVRDKzMsIGx1c2VyZHJvb2cgd3JvdGU6DQo+IEkndmUgYmVl biB0cnlpbmcgdG8gd3JpdGUgYSBzaW1wbGUgd2ViIGFwcCB0aGF0IHVzZXMgZHJhZyBhbmQgZHJv cC4gDQo+IEl0IHdvcmtzIGZpbmUgb24gYSBkZXNrdG9wIHdpdGggYSBtb3VzZSwgY2FwdHVyaW5n ICJkcmFnc3RhcnQiIGFuZCANCj4gImRyYWdlbmQiIGZvciB0aGUgZHJhZ2dhYmxlPXRydWUgZWxl bWVudCBhbmQgY2FwdHVyaW5nICJkcmFnZW50ZXIiLCANCj4gImRyYWdvdmVyIiBhbmQgImRyb3Ai IG9uIHRoZSB0YXJnZXQgZWxlbWVudC4gDQo+IA0KPiBJIGFkZGVkIGxpc3RlbmVycyBmb3IgInRv dWNoc3RhcnQiIGFuZCAidG91Y2hlbmQiIGFuZCBoYWQgdGhlIGxhdHRlciANCj4gc2ltcGx5IGNh bGwgbXkgZHJvcCBoYW5kbGVyIGZ1bmN0aW9uLiBBbmQgdGhhdCBnb3QgaXQgdG8gd29yayB3aXRo IA0KPiB0aGUgdG91Y2hzY3JlZW4gb24gbXkgd2luZG93cyBsYXB0b3AsIGJ1dCBubyBkaWNlIG9u IGFuIGFuZHJvaWQgDQo+IHBob25lLiBJcyB0aGVyZSBhbiBleHRyYSB0cmljayBJIGRpZG4ndCBk ZXNjcmliZSBkb2luZyBoZXJlPyBJJ20gY2FsbGluZyANCj4gZXZlbnQucHJldmVudERlZmF1bHQo KSBpbiB0aGUgaGFuZGxlcnMgZm9yICJkcmFnZW50ZXIiIGFuZCAiZHJhZ292ZXIiLiANCj4gRG8g SSBuZWVkIHRvIHByZXZlbnQgdGhlIGRlZmF1bHQgYWN0aW9uIHdpdGggInRvdWNoc3RhcnQiID8N Cg==

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)