Draggable text elements with overflow

[unseenstudio]

In the Codepen I am trying to make a draggable list of items that contain text. Each item must have `overflow: auto` so that the content can scroll. However, on touch devices in Chrome the pointer event gets caught in the item and it does not drag smoothly.

 

To replicate, launch in Chrome and enter responsive mode via dev tools. Dragging in between the elements works as expected, but dragging on the elements does not work correctly.

 

I have tried various draggable options and also laying out without flexbox, but none seem to work. I have also tried toggling a dragging/not-dragging css class that sets overflow:hidden / auto , but that does not have the required effect.

See the Pen efbf92943645bf108e720c9b7b640abd by motionimaging (@motionimaging) on CodePen

[GreenSock]

It looks like the Chrome (in responsive mode) is automatically firing a "pointercancel" event even though Draggable does everything in its power to avoid that. It's basically ignoring the preventDefault() call, and acting like you want to touch-scroll the content. Definitely seems like a browser bug to me. The only way I could find to resolve your demo is to simply add the following rule to the CSS:

.item {
  touch-action: none;
}

 

Again, I'm pretty confident this isn't a Draggable bug. But at least there appears to be a relatively easy fix you can apply to your CSS. 

 

Does that help? 

[unseenstudio]

Thanks @GreenSock - that's a massive help and super close. I didn't even know `touch-action` was a thing, so I've learned something too.

 

However, `touch-action: none;` means you can't scroll the content down either. I've resolved my issue by limited touch action to the y-axis using `touch-action: pan-y;` . 

 

This could be an issue if someone wanted to create a two dimension Draggable with text and maintain scroll on the element.