Jump to content
Search Community

long pressed and then drag does not work for touch

cswebdev test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey,

 

i first try to explain what i want to do:

 

i have an vertical sortable list of items where each item should be draggable after item was long pressed. if no item was long pressed, the hole list of items should be scrollable (also scroll by touch on touch devices).

I listen for mouse/touch/pointer long pressed, and then i create a new Draggable, and call startDrag(e) with the event i received from my lister.

 

With Mouse Events, all is fine, but with Touch Events, i have the problem that a pointercancel event is called after 7 or 8 pixel dragging a element in one direction and the dragging abort.

 

Please see my codepen, hold press and drag the red item. you have to use a touch device, or set force touch sensor in chrome devtools.

Has someone an idea?

 

 

Best Regards

Chris

 

 

 

 

See the Pen jZbXqe by anon (@anon) on CodePen

Link to comment
Share on other sites

Hm, I'm not sure that's even possible. iOS, for example, forces you to call preventDefault() on the "touchstart" event in order to effectively stop touch-scrolling, but in your example you wouldn't know at that point if you want touch-scrolling or not (if they keep holding for a long-press, you do, otherwise you don't). I personally don't see a way around it logically, but perhaps someone else has an idea. 

  • Like 1
Link to comment
Share on other sites

Thank you for your fast answer.

 

When i set "touch-action: none;" in css to the item, or when i call preventDefault() on dragStart, the pointercancel is not triggered.

but as soon as i wrap it with a timeout, it does not working.

 

is perhaps my ux concept wrong?

Are there other better ways to solve a scrollable sortable list for p. e. mobile devices?

I am at a loss

Link to comment
Share on other sites

Sorry, I don't see a clear answer (though it could be due to being brain-dead at 2am) :)

 

You can't delay a preventDefault() call...that wouldn't make much sense for the browser since it must decide immediately whether or not it should touch-scroll (or whatever the default action is). And once you decide to call preventDefault(), you can't wait 3 seconds and then undo that call somehow so that you can kill scrolling and treat it as a drag. At least I don't see a good option here, but maybe someone else will chime in with a genius solution. 

Link to comment
Share on other sites

Hey,

 

yes, it may be due to brain death... ;)

 

I got into the topic and I lacked the necessary distance at the end to realize that I am wrong.

 

I will solve the problem by changing the user interface. I will show a small button per list entry, which executes directly the drag and drop. Think that is understandable anyway.

 

thanks for your support!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...