Nested element dragging behaves differently on iPad

[shyam-habarakada]

Setup two drag enabled DIVs within each other and try attaching something like a horizontal drag updater to both. Event canceling is off, so both elements should drag simultaneously.

In this setup, on a PC (with chrome), clicking on and dragging the inner DIV with the mouse continues the drag even when the element has moved away from underneath the mouse.

On iOS, the inner DIV stops dragging once it has moved away from under the touch point.

Can this be made consistent? I personally don't have a preference either way -- although the iOS behavior seems more intuitive. IOW, direct manipulation makes the most sense when dragging.

[sambaker]

There are a couple of ways to achieve consistency here, I'll work on it today.

[ericcroskeyartefact]

Shyam:

On iOS we are using the ELEMENT as the event sink owner, on desktop we use DOCUMENT.

Sam is going to add a switch so that you can specify on iOS that the handler be attached to the DOCUMENT rather than the ELEMENT.

The default should remain attaching the handler to the ELEMENT in iOS to avoid latent bugs in complex multitouch scenarios.

ej

-----Original Message----- From: shyam-habarakada [mailto:reply@reply.github.com] Sent: Wednesday, August 01, 2012 6:35 AM To: Eric Juvet Subject: [awe-core] Nested element dragging behaves differently on iPad (#7)

Setup two drag enabled DIVs within each other and try attaching something like a horizontal drag updater to both. Event canceling is off, so both elements should drag simultaneously.

In this setup, on a PC (with chrome), clicking on and dragging the inner DIV with the mouse continues the drag even when the element has moved away from underneath the mouse.

On iOS, the inner DIV stops dragging once it has moved away from under the touch point.

Can this be made consistent? I personally don't have a preference either way -- although the iOS behavior seems more intuitive. IOW, direct manipulation makes the most sense when dragging.

---

Reply to this email directly or view it on GitHub: https://github.com/sambaker/awe-core/issues/7

[sambaker]

I've added config.listenToDocument to enable drag, test it out on iPad and see if it makes iOS behave the same as desktop. Making desktop behave the same as iOS would be harder to do.

[shyam-habarakada]

Thanks - I will have a look.

As an fyi, i also had to do the following to get dragging to work smoothly on iOS. Without it, the elastic scrolling screws up my drag stroke, and it interferes with the intended behavior I'm trying to get on the page.

// prevent elastic scrolling on iOS
document.addEventListener("touchmove", function(e) {
  e.preventDefault();
}, false);

[shyam-habarakada]

As an aside, try to create simple test pages in awe-core to test these scenarios. That way you don't have to rely on the code being tested elsewhere. See some of the examples I had put in place to test the awe-ui popup features.

[sambaker]

I've added a test page, eg http://localhost/awe-core/test/drag.html

I don't know what scenarios you're trying to solve exactly since the example on that page moves two elements in a hierarchy which causes them to seperate.