Not scrollable on mobile with handle

[martinory]

Hi!

When filling a whole page with a list of list tiles with drag handles, when touching the non-handle part, the page is not able to scroll, whereas when touching outside of the tile it is possible.

    AvatarHandler avatar = AvatarHandler.clone();

    dropzone = Dropzone(querySelectorAll('.sortable-zone'));

    draggable = Draggable(querySelectorAll('.sortable'),
        avatarHandler: avatar, handle: '.handle');

[marcojakob]

It doesn't work because the CSS property touch-action: none is added to the .sortable.

We could improve this part in draggable_manager.dart to only change the touch-action property for the handle. But then we should also make sure that cancel also works.

Do you want to have a go with this?

If not, there might be a workaround if you use something like the following (haven't tested it):

.sortable {
  touch-action: auto !important;
}
.sortable .handle {
  touch-action: none !important;
}

[martinory]

I'm too inexperienced in the moment for that. It's a nice solution that works, although now there is another issue where on dragStart page scrolls to the top of the page. Dnd, in general, is difficult on mobile.

[lrembacz]

Based on your package I've made Typescript version of the DnD with MaterialComponent as Base and I'm on fixing things - https://github.com/lrembacz/dragndrop.

My solution is to make custom way to scroll when dragging with something like:

    handleScroll(currentPosition: Point) {
        const startPosition = this.foundation.getAdapter().getCurrentDrag().startPosition;
        window.scroll(document.body.scrollLeft + (currentPosition.x - startPosition.x), document.body.scrollTop + (currentPosition.y - startPosition.y));
    }

Did you get better idea to handle that?

Thanks for your package actually!