Tasks: Drag and Drop on iOS 13.3 only selects text

[raimund-schluessler]

Trying to drag and drop tasks on iOS 13.3 only selects text but does not actually drag anything.
I don't know when this broke, but maybe user-select: none might help.

[raimund-schluessler]

This is somehow related to the app-navigation sidebar. Deleting these lines https://github.com/nextcloud/tasks/blob/master/src/app.vue#L24-L27 (the sidebar) fixes the drag and drop issue. I guess it has something to do with snap.js. Does anyone from @nextcloud/javascript or @nextcloud/vuejs know how to further debug this?

[raimund-schluessler]

Setting class="no-snapper" here https://github.com/nextcloud/tasks/blob/master/src/app.vue#L29 which disabled snap.js as seen https://github.com/nextcloud/server/blob/aa46fc26a46cc6b375ba732bcf3e0dc04a08a2f7/core/src/init.js#L208 also fixes the issue, but then the sidebar cannot be opened on mobile anymore.

[raimund-schluessler]

With touchToDrag: false for the Snapper https://github.com/nextcloud/server/blob/master/core/src/init.js#L216 the issue diappears.

[skjnldsv]

You need to use the AppContent comonent https://github.com/nextcloud/nextcloud-vue/blob/fca6f42da2ba6936ed651ba83c7041dbd130b367/src/components/AppContent/AppContent.vue#L24

[raimund-schluessler]

Using the AppContent component seems to work, but it requires to also use the AppNavigation component. And using the AppNavigation component with own li elements is a lot of hassle as the CSS is not made for this.

And switching to AppNavigationItem etc is a lot of work and not so easily possible with the draggable component used for making the navigation items a drop target. This will take some time.

[skjnldsv]

And switching to AppNavigationItem etc is a lot of work and not so easily possible with the draggable component used for making the navigation items a drop target. This will take some time.

It's not that hard, I just did it with some complicated setups (apps management and users in server) and it took me a few hours ;)

[raimund-schluessler]

The problem is the draggable component we use to allow dropping tasks on an app-navigation-item https://github.com/nextcloud/tasks/blob/master/src/components/TheList.vue#L24. Somehow the slots for e.g. counter and icon don't work with it.

We either have to look into this for the vue components, or I find a way to not use vue.draggable for simply dropping stuff. Maybe I can directly use HTML5 drag and drop.