Mobile Touch Support

[neodescis]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Sorry, we will not be able to answer every support request.  Please consider other venues for support requests

Current behavior
Not sure if this is a bug or a feature request. The library's README lists as touch support as one of its features, but this doesn't actually work. I've tried the demos on both an iPhone and Android, and they do not work properly. Specific issues I'm seeing:

• Some of the simpler examples (everything above but not including "Nested Sortable") allow drag and drop intermittently, but also scroll the page while dragging such that it's not usable.
• Also on these simpler examples, attempting to drag (whether it works or not) selects text inside of the item being dragged
• On the more complex examples ("Nested Sortable" and below), items to not drag at all

I did see that you had a previous issue filed that was closed, but it seems that maybe it shouldn't have been?

Expected behavior
Given that it's an advertised feature, I think the feature should work! Otherwise, please remove it from your feature list.

Reproduction of the problem
Run the demo page on an iPhone or Android and interact with the examples.

For what it's worth, I can also repro the problems easily in Chrome's mobile device simulator.

What is the motivation / use case for changing the behavior?
Writing a page that needs to be mobile friendly.

• ngx-dnd version: 3.2.0, 4.0.0

• Angular version: 5.2.8

• Browser: Chrome for Android (latest), Safari for iPhone (latest)

• Language: TypeScript 2.8

[pradt]

I second this...

Motivation - I want to use this within Ionic 3 app.

[itslenny]

For the selection issue you can simply add user-select: none; to the element to disable it.

[kstolk]

Any updates on this?

[neodescis]

I finally had time to debug through this, and I think I have some workable solutions. I've tested these in desktop Chrome's mobile emulation, and on a real phone. Here's what I've found:

1. Add this CSS:
   ngx-dnd-item { user-select: none; touch-action: none; }

2. Any time you are using ngx-dnd-container, you must specify the [moves] input (even if it's just a function that returns true), otherwise the container sets the [moves] input on the ngxDraggable directive to undefined. This causes the directive's touch handlers to not function correctly. I'd suggest updating ngx-dnd to provide a default value for the [moves] input on the ngx-dnd-container component.

3. Finally, and most importantly, the mobile-drag-drop polyfill must be instantiated differently than I've seen posted in another issue here. The default implementation of tryFindDraggableTarget in that polyfill won't find ngxdraggable elements, but it can be overridden to do so. Here's the initialization I'm using (sorry, I can't seem to get this to format correctly here):

import { polyfill } from 'mobile-drag-drop';
// optional import of scroll behaviour
import { scrollBehaviourDragImageTranslateOverride } from 'mobile-drag-drop/scroll-behaviour';

polyfill({
// use this to make use of the scroll behaviour
dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride,
tryFindDraggableTarget: (event: TouchEvent) => {
let el = event.target;

do {
    if (el.hasAttribute
        && el.hasAttribute("ngxdraggable")) {
        return el;
    }
} while ((el = <HTMLElement>el.parentNode) && el !== document.body);

}
});

// workaround to make scroll prevent work in iOS Safari > 10
try {
window.addEventListener('touchmove', function() { }, { passive: false } as any );
} catch (e) { }

[AurisAudentis]

Any updates on this?